<template>
  <div class="main-page">
    <div class="page-title">
      <span>房产供需分析-{{ mainTypeLabel }}</span>
      <div class="top-tab">
        <div class="top-tab-left">
          <div class="top-tab-left-item" v-for="(item, index) in ['统计', '分析']" :key="index" @click="goOtherPage(item)">{{ item }}</div>
        </div>
        <div class="top-tab-right">
          <div class="top-tab-right-item" @click="goOtherPage('模拟测算')">模拟测算</div>
          <span>{{ currentYearMonthDay }}</span>
        </div>
      </div>
    </div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 102px)">
        <el-col :span="9">
          <div class="house-property-sales-trend-analysis">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产销售趋势分析</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="public-topinfo">
              <time-filtrate-public :cityAndAreaList="cityAndAreaList" style="max-width: 360px" @changeFiltrateTime="housePropertySalesTrendAnalysisChangeFiltrateTime"></time-filtrate-public>
              <div class="public-topinfo-text">
                <div class="public-topinfo-item"
                     v-for="item of housePropertySalesTrendAnalysisTopinfo">
                  <span>{{ item.label }}：</span>
                  <span>{{ item.value || '--' }}{{ item.unit }}&nbsp; </span>
                  <template v-if="item.yoyPercentage || item.yoyPercentage === 0">
                    <span>同比</span>
                    <template v-if="item.yoyPercentage !== 0">
                      <el-icon v-if="item.yoyPercentage > 0" color="#4DAC56">
                        <Top/>
                      </el-icon>
                      <el-icon v-else color="#EF8169">
                        <Bottom/>
                      </el-icon>
                      <span
                          :style="{ color: item.yoyPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                          Math.abs(item.yoyPercentage)
                        }}%</span>
                    </template>
                    <template v-else>--</template>
                  </template>
                  <template v-if="item.qoqPercentage || item.qoqPercentage === 0">
                    <span> 环比</span>
                    <template v-if="item.qoqPercentage !== 0">
                      <el-icon v-if="item.qoqPercentage > 0" color="#4DAC56">
                        <Top/>
                      </el-icon>
                      <el-icon v-else color="#EF8169">
                        <Bottom/>
                      </el-icon>
                      <span
                          :style="{ color: item.qoqPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                          Math.abs(item.qoqPercentage)
                        }}%</span>
                    </template>
                    <template v-else>--</template>
                  </template>
                </div>
              </div>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="sales-trend-impact-factor-importance-ranking" style="position: relative">
                  <div class="pubilc-chart-title">影响因子重要程度排行</div>
                  <bar-impact-factor-importance-ranking
                      v-if="salesTrendImpactFactorImportanceRankingData.yAxisData?.length"
                      ref="salesTrendImpactFactorImportanceRanking"
                      :barData="salesTrendImpactFactorImportanceRankingData"
                      :intervalData="{currentBarIndex: salesTrendImpactFactorImportanceRankingData.currentBarIndex}"
                      class="h147"
                      @click="fullSc('barImpactFactorImportanceRanking', salesTrendImpactFactorImportanceRankingData, 'salesTrendImpactFactorImportanceRanking')"
                  ></bar-impact-factor-importance-ranking>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="sales-trend-house-property-new-sales-price-trend">
                  <div class="pubilc-chart-title">房地产新增销量价格走势</div>
                  <el-select class="sales-trend-house-property-new-sales-price-trend-select"
                             v-model="currentSalesTrendHousePropertyNewSalesPriceTrendSelect" size="small"
                             @change="changeSalesTrendHousePropertyNewSalesPriceTrendSelect">
                    <el-option
                        v-for="item in salesTrendHousePropertyNewSalesPriceTrendSelectList"
                        :key="item.id"
                        :label="item.value"
                        :value="item.id"
                        class="custom-select-option"
                    />
                  </el-select>
                  <div v-if="housePropertyNewSalesPriceTrendData.xAxisData?.length" style="position: relative">
                    <line-house-property-new-sales-price-trend
                        ref="housePropertyNewSalesPriceTrend"
                        :lineData="housePropertyNewSalesPriceTrendData"
                        class="h147"
                        @changeXAxisTimeType="housePropertyNewSalesPriceTrendData.xAxisTimeType = $event"
                        @click="fullSc('lineHousePropertyNewSalesPriceTrend', housePropertyNewSalesPriceTrendData, 'housePropertyNewSalesPriceTrend')"
                    ></line-house-property-new-sales-price-trend>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="house-property-sales-trend-analysis-tabs">
              <el-tabs v-model="currentHousePropertySalesTrendAnalysisTab"
                       @tab-change="changeHousePropertySalesTrendAnalysisTab">
                <el-tab-pane v-for="(item, index) of housePropertySalesTrendAnalysisTab" :key="item.id"
                             :label="item.label"
                             :name="item.id"></el-tab-pane>
              </el-tabs>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="sales-trend-new-sales-statistics" style="position: relative">
                  <div class="pubilc-chart-title">新增销售情况统计</div>
                  <time-filtrate-public :cityAndAreaList="cityAndAreaList" style="position: absolute; right: 0; top: 0" :isAreaSelectShow="false" @changeFiltrateTime="housePropertySalesTrendNewSalesStatisticsChangeFiltrateTime"></time-filtrate-public>
                  <bar-sales-trend-new-sales-statistics
                      v-if="salesTrendNewSalesStatisticsData.xAxisData?.length"
                      ref="salesTrendNewSalesStatistics"
                      :barData="salesTrendNewSalesStatisticsData"
                      class="h150"
                      @click="fullSc('barSalesTrendNewSalesStatistics', salesTrendNewSalesStatisticsData)"
                  ></bar-sales-trend-new-sales-statistics>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="sales-trend-house-condition-statistics" style="position: relative">
                  <div class="pubilc-chart-title">房屋情况统计</div>
                  <el-date-picker
                    class="month-picker"
                    v-model="salesTrendHouseConditionStatisticsMonthPicker"
                    type="month"
                    value-format="YYYY-MM"
                    :clearable="false"
                    placeholder="请选择月份"
                    size="small"
                  />
                  <radar-sales-trend-house-condition-statistics
                      v-if="salesTrendHouseConditionStatisticsData.legendData?.length"
                      ref="salesTrendHouseConditionStatistics"
                      :radarData="salesTrendHouseConditionStatisticsData"
                      class="h150"
                      @click="fullSc('radarSalesTrendHouseConditionStatistics', salesTrendHouseConditionStatisticsData)"
                  ></radar-sales-trend-house-condition-statistics>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="sales-trend-price-distribution" style="position: relative">
                  <div class="pubilc-chart-title">价格分布</div>
                  <el-date-picker
                    class="month-picker"
                    v-model="salesTrendPriceDistributionMonthPicker"
                    type="month"
                    value-format="YYYY-MM"
                    :clearable="false"
                    placeholder="请选择月份"
                    size="small"
                  />
                  <boxplot-sales-trend
                      v-if="salesTrendPriceDistributionData.xAxisData?.length"
                      ref="salesTrendPriceDistribution"
                      :boxplotData="salesTrendPriceDistributionData"
                      class="h118"
                      @click="fullSc('boxplotSalesTrend', salesTrendPriceDistributionData)"
                  ></boxplot-sales-trend>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="sales-trend-areal-distribution" style="position: relative">
                  <div class="pubilc-chart-title">面积分布</div>
                  <el-date-picker
                    class="month-picker"
                    v-model="salesTrendArealDistributionMonthPicker"
                    type="month"
                    value-format="YYYY-MM"
                    :clearable="false"
                    placeholder="请选择月份"
                    size="small"
                  />
                  <boxplot-sales-trend
                      v-if="salesTrendArealDistributionData.xAxisData?.length"
                      ref="salesTrendArealDistribution"
                      :boxplotData="salesTrendArealDistributionData"
                      class="h118"
                      @click="fullSc('boxplotSalesTrend', salesTrendArealDistributionData)"
                  ></boxplot-sales-trend>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="house-property-deferred-construction-project-delivery-trends">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo"
                   src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产停缓建项目交付趋势</p>
            </div>
            <div class="house-property-deferred-construction-project-delivery-trends-select">
              <el-select class="house-property-deferred-construction-project-delivery-trends-area-select" v-model="deferredConstructionProjectReasonsStatisticsData.areaCode" size="small"
                         @change="changeDeferredConstructionProjectReasonsStatisticsAreaSelect">
                <el-option
                    v-for="item in cityAndAreaList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                    class="custom-select-option"
                />
              </el-select>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="public-topinfo" style="justify-content: center">
              <div class="public-topinfo-text">
                <div class="public-topinfo-item">
                  <span>{{ deferredConstructionProjectReasonsStatisticsTopinfo.label }}：</span>
                  <span>{{ deferredConstructionProjectReasonsStatisticsTopinfo.value }}&nbsp;&nbsp;同比</span>
                  <template v-if="deferredConstructionProjectReasonsStatisticsTopinfo.yoyPercentage !== 0">
                    <el-icon v-if="deferredConstructionProjectReasonsStatisticsTopinfo.yoyPercentage > 0" color="#4DAC56">
                      <Top/>
                    </el-icon>
                    <el-icon v-else color="#EF8169">
                      <Bottom/>
                    </el-icon>
                    <span
                        :style="{ color: deferredConstructionProjectReasonsStatisticsTopinfo.yoyPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                        Math.abs(deferredConstructionProjectReasonsStatisticsTopinfo.yoyPercentage)
                      }}%</span>
                  </template>
                  <template v-else>--</template>
                  <span> 环比</span>
                  <template v-if="deferredConstructionProjectReasonsStatisticsTopinfo.qoqPercentage !== 0">
                    <el-icon v-if="deferredConstructionProjectReasonsStatisticsTopinfo.qoqPercentage > 0" color="#4DAC56">
                      <Top/>
                    </el-icon>
                    <el-icon v-else color="#EF8169">
                      <Bottom/>
                    </el-icon>
                    <span
                        :style="{ color: deferredConstructionProjectReasonsStatisticsTopinfo.qoqPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                        Math.abs(deferredConstructionProjectReasonsStatisticsTopinfo.qoqPercentage)
                      }}%</span>
                  </template>
                  <template v-else>--</template>
                  <span style="margin-left: 20px">({{ deferredConstructionProjectReasonsStatisticsTopinfo.value > 100 ? '高' : '低' }}于停缓建项目警戒线)</span>
                </div>
              </div>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="deferred-construction-project-reasons-statistics" style="position: relative">
                  <div class="pubilc-chart-title">停缓建项目原因统计</div>
                  <pie
                      v-if="deferredConstructionProjectReasonsStatisticsData.seriesData?.length"
                      ref="deferredConstructionProjectReasonsStatistics"
                      :pieData="deferredConstructionProjectReasonsStatisticsData"
                      class="h135"
                      @click="fullSc('pie', deferredConstructionProjectReasonsStatisticsData)"
                  ></pie>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-deferred-construction-project-trend">
                  <div class="pubilc-chart-title">房地产停缓建项目走势</div>
                  <div v-if="housePropertyDeferredConstructionProjectTrendData.xAxisData?.length" style="position: relative">
                    <single-line
                        ref="housePropertyDeferredConstructionProjectTrend"
                        :lineData="housePropertyDeferredConstructionProjectTrendData"
                        class="h135"
                        @changeXAxisTimeType="housePropertyDeferredConstructionProjectTrendData.xAxisTimeType = $event"
                        @click="fullSc('singleLine', housePropertyDeferredConstructionProjectTrendData)"
                    ></single-line>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6" style="position: relative">
          <div class="middle-map">
            <map-box
              :listData="mapList"
              :mapConfig="{layoutSize: '105%'}"
              @mapNameChange="mapNameChange"
            ></map-box>
            <div class="map-address">辽宁省{{ cityObj.name ? `-${cityObj.name}` : '' }}</div>
          </div>
          <div class="house-property-condition">
            <div class="house-property-sales-condition">
              <line-house-property-condition
                  v-if="housePropertySalesConditionData.xAxisData?.length"
                  ref="housePropertySalesCondition"
                  :lineData="housePropertySalesConditionData"
                  :tabList="housePropertySalesConditionTabList"
                  :info-list="housePropertySalesConditionInfoList"
                  :cityAndAreaList="cityAndAreaList"
                  class="h140"
                  @changeTab="changeHousePropertySalesConditionTab"
                  @changeFiltrateTime="changeHousePropertySalesConditionTime"
                  @changeHouseType="changeHousePropertySalesConditionHouseType"
                  @changeAcreage="changeHousePropertySalesConditionAcreage"
                  @changeXAxisTimeType="housePropertySalesConditionData.xAxisTimeType = $event"
                  @magnifyChart="fullSc('lineHousePropertyConditionChart', housePropertySalesConditionData, 'housePropertySalesCondition')"
              >
              </line-house-property-condition>
            </div>
            <div class="house-property-supply-demand-condition">
              <line-house-property-condition
                  v-if="housePropertySupplyDemandConditionData.xAxisData?.length"
                  ref="housePropertySupplyDemandCondition"
                  :lineData="housePropertySupplyDemandConditionData"
                  :tabList="housePropertySupplyDemandConditionTabList"
                  :info-list="housePropertySupplyDemandConditionInfoList"
                  :cityAndAreaList="cityAndAreaList"
                  class="h140"
                  @changeTab="changeHousePropertySupplyDemandConditionTab"
                  @changeFiltrateTime="changeHousePropertySupplyDemandConditionTime"
                  @changeHouseType="changeHousePropertySupplyDemandConditionHouseType"
                  @changeAcreage="changeHousePropertySupplyDemandConditionAcreage"
                  @changeXAxisTimeType="housePropertySupplyDemandConditionData.xAxisTimeType = $event"
                  @magnifyChart="fullSc('lineHousePropertyConditionChart', housePropertySupplyDemandConditionData, 'housePropertySupplyDemandCondition')"
              >
              </line-house-property-condition>
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="house-property-supply-demand-contradiction-analysis">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产供需矛盾分析</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="public-topinfo" style="justify-content: space-evenly">
              <time-filtrate-public :cityAndAreaList="cityAndAreaList" style="" @changeFiltrateTime="supplyDemandContradictionAnalysisChangeFiltrateTime"></time-filtrate-public>
              <div class="public-topinfo-text">
                <div class="public-topinfo-item"
                     v-for="item of housePropertySupplyDemandContradictionAnalysisTopinfo">
                  <span>{{ item.label }}：</span>
                  <span>{{ item.value }}{{ item.unit }}&nbsp;&nbsp;</span>
                  <template v-if="item.yoyPercentage || item.yoyPercentage === 0">
                    <span>同比</span>
                    <template v-if="item.yoyPercentage !== 0">
                      <el-icon v-if="item.yoyPercentage > 0" color="#4DAC56">
                        <Top/>
                      </el-icon>
                      <el-icon v-else color="#EF8169">
                        <Bottom/>
                      </el-icon>
                      <span
                          :style="{ color: item.yoyPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                          Math.abs(item.yoyPercentage)
                        }}%</span>
                    </template>
                    <template v-else>--</template>
                  </template>
                  <template v-if="item.qoqPercentage || item.qoqPercentage === 0">
                    <span> 环比</span>
                    <template v-if="item.qoqPercentage !== 0">
                      <el-icon v-if="item.qoqPercentage > 0" color="#4DAC56">
                        <Top/>
                      </el-icon>
                      <el-icon v-else color="#EF8169">
                        <Bottom/>
                      </el-icon>
                      <span
                          :style="{ color: item.qoqPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                          Math.abs(item.qoqPercentage)
                        }}%</span>
                    </template>
                    <template v-else>--</template>
                  </template>
                </div>
              </div>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="supply-demand-contradiction-analysis-impact-factor-importance-ranking" style="position: relative">
                  <div class="pubilc-chart-title">影响因子重要程度排行</div>
                  <div class="impact-factor-importance-ranking-btns">
                    <el-tabs v-model="currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab"
                             @tab-change="changeSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab">
                      <el-tab-pane v-for="(item, index) of [
                          {
                            label: '供给',
                            value: 2
                          },
                          {
                            label: '销售',
                            value: 3
                          }
                      ]" :key="item.value"
                                   :label="item.label"
                                   :name="item.value"></el-tab-pane>
                    </el-tabs>
                  </div>
                  <bar-impact-factor-importance-ranking
                      v-if="supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.yAxisData?.length"
                      ref="supplyDemandContradictionAnalysisImpactFactorImportanceRanking"
                      :barData="supplyDemandContradictionAnalysisImpactFactorImportanceRankingData"
                      :intervalData="{currentBarIndex: supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.currentBarIndex}"
                      class="h147"
                      @click="fullSc('barImpactFactorImportanceRanking', supplyDemandContradictionAnalysisImpactFactorImportanceRankingData, 'supplyDemandContradictionAnalysisImpactFactorImportanceRanking')"
                  ></bar-impact-factor-importance-ranking>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="house-property-supply-demand-trend">
                  <div class="pubilc-chart-title">房地产新增供需走势</div>
                  <div v-if="housePropertySupplyDemandTrendData.xAxisData?.length" style="position: relative;">
                    <line-bar ref="housePropertySupplyDemandTrend"
                              :lineBarData="housePropertySupplyDemandTrendData"
                              class="h147"
                              @changeXAxisTimeType="housePropertySupplyDemandTrendData.xAxisTimeType = $event"
                              @click="fullSc('lineBar', housePropertySupplyDemandTrendData)"
                    ></line-bar>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="supply-demand-contradiction-analysis-new-supply-demand-distribution">
              <div class="pubilc-chart-title">房地产新增供需分布</div>
              <div class="new-supply-demand-distribution-select">
                <el-select class="new-supply-demand-distribution-select-item" v-model="newSupplyDemandDistributionData.areaCode" size="small"
                           @change="(event) => changeDistributionSelect(event, 'city')">
                  <el-option
                      v-for="item in cityAndAreaList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                      class="custom-select-option"
                  />
                </el-select>
                <el-select class="new-supply-demand-distribution-select-item" v-model="newSupplyDemandDistributionData.currentDistributionHouseType" size="small"
                           @change="(event) => changeDistributionSelect(event, 'houseType')">
                  <el-option
                      v-for="item in distributionList.houseTypeList"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                      class="custom-select-option"
                  />
                </el-select>
                <el-select class="new-supply-demand-distribution-select-item" v-model="newSupplyDemandDistributionData.currentDistributionAcreage" size="small"
                           @change="(event) => changeDistributionSelect(event, 'acreage')">
                  <el-option
                      v-for="item in distributionList.acreageList"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                      class="custom-select-option"
                  />
                </el-select>
                <time-filtrate-public
                    class="time-filtrate-public"
                    :isAreaSelectShow="false"
                    :cityAndAreaList="cityAndAreaList"
                    style="max-width: 360px"
                    @changeFiltrateTime="newSupplyDemandDistributionChangeFiltrateTime"
                    @changeTimeType="newSupplyDemandDistributionChangeFiltrateTimeType"
                ></time-filtrate-public>
              </div>
              <scatter
                  v-if="newSupplyDemandDistributionData.seriesData?.length"
                  ref="newSupplyDemandDistribution"
                  :scatterData="newSupplyDemandDistributionData"
                  class="h180"
                  @click="fullSc('scatter', newSupplyDemandDistributionData)"
              >
              </scatter>
            </div>
          </div>
          <div class="house-property-area-inventory-sales-period-condition-statistics">
            <div class="main-content-gird-title">
              <img class="main-content-gird-title-logo" src="@/assets/img/housePropertyAnalysis/statistics/module-title-logo.png"
                   alt=""/>
              <p>房地产各区库存及去化周期情况统计</p>
            </div>
            <div class="module-title-content-middle-line"></div>
            <div class="public-topinfo" style="justify-content: center">
              <time-filtrate-public :cityAndAreaList="cityAndAreaList" style="position: relative; z-index: 1;max-width: 360px" @changeFiltrateTime="areaInventorySalesPeriodConditionChangeFiltrateTime"></time-filtrate-public>
              <div class="public-topinfo-text">
                <div class="public-topinfo-item">
                  <span>{{ housePropertyAreaInventorySalesPeriodConditionStatistics.label }}：</span>
                  <span>{{ housePropertyAreaInventorySalesPeriodConditionStatistics.value }}{{ housePropertyAreaInventorySalesPeriodConditionStatistics.unit }}&nbsp;&nbsp;同比</span>
                  <template v-if="housePropertyAreaInventorySalesPeriodConditionStatistics.yoyPercentage !== 0 || housePropertyAreaInventorySalesPeriodConditionStatistics.yoyPercentage">
                    <el-icon v-if="housePropertyAreaInventorySalesPeriodConditionStatistics.yoyPercentage > 0" color="#4DAC56">
                      <Top/>
                    </el-icon>
                    <el-icon v-else color="#EF8169">
                      <Bottom/>
                    </el-icon>
                    <span
                        :style="{ color: housePropertyAreaInventorySalesPeriodConditionStatistics.yoyPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                        Math.abs(housePropertyAreaInventorySalesPeriodConditionStatistics.yoyPercentage)
                      }}%</span>
                  </template>
                  <template v-else>--</template>
                  <span>&nbsp;环比</span>
                  <template v-if="housePropertyAreaInventorySalesPeriodConditionStatistics.qoqPercentage !== 0 && housePropertyAreaInventorySalesPeriodConditionStatistics.qoqPercentage">
                    <el-icon v-if="housePropertyAreaInventorySalesPeriodConditionStatistics.qoqPercentage > 0" color="#4DAC56">
                      <Top/>
                    </el-icon>
                    <el-icon v-else color="#EF8169">
                      <Bottom/>
                    </el-icon>
                    <span
                        :style="{ color: housePropertyAreaInventorySalesPeriodConditionStatistics.qoqPercentage > 0 ? '#4DAC56' : '#EF8169' }">{{
                        Math.abs(housePropertyAreaInventorySalesPeriodConditionStatistics.qoqPercentage)
                      }}%</span>
                  </template>
                  <template v-else>--</template>
                  <span style="margin-left: 20px">({{ housePropertyAreaInventorySalesPeriodConditionStatistics.value > 60 ? '高' : '低' }}于去化周期警戒线)</span>
                </div>
              </div>
            </div>
            <el-row :gutter="10">
              <el-col :span="12">
                <div class="inventory-sales-period-impact-factor-importance-ranking" style="position: relative">
                  <div class="pubilc-chart-title">影响因子重要程度排行</div>
                  <div class="impact-factor-importance-ranking-btns">
                    <el-tabs v-model="currentInventorySalesPeriodImpactFactorImportanceRankingTab"
                             @tab-change="changeInventorySalesPeriodImpactFactorImportanceRankingTab">
                      <el-tab-pane v-for="(item, index) of [
                          {
                            label: '去化周期',
                            value: 4
                          },
                          {
                            label: '库存',
                            value: 5
                          }
                      ]" :key="item.value"
                                   :label="item.label"
                                   :name="item.value"></el-tab-pane>
                    </el-tabs>
                  </div>
                  <bar-impact-factor-importance-ranking
                      v-if="inventorySalesPeriodImpactFactorImportanceRankingData.yAxisData?.length"
                      ref="inventorySalesPeriodImpactFactorImportanceRanking"
                      :barData="inventorySalesPeriodImpactFactorImportanceRankingData"
                      :intervalData="{
                        currentBarIndex: inventorySalesPeriodImpactFactorImportanceRankingData.currentBarIndex
                      }"
                      class="h147"
                      @click="fullSc('barImpactFactorImportanceRanking', inventorySalesPeriodImpactFactorImportanceRankingData, 'inventorySalesPeriodImpactFactorImportanceRanking')"
                  ></bar-impact-factor-importance-ranking>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="inventory-sales-period-house-property-new-sales-price-trend">
                  <div class="pubilc-chart-title">房地产销量价格走势</div>
                  <div v-if="inventorySalesPeriodHousePropertyNewSalesPriceTrendData.xAxisData?.length" style="position: relative">
                    <line-house-property-new-sales-price-trend
                        ref="inventorySalesPeriodHousePropertyNewSalesPriceTrend"
                        :lineData="inventorySalesPeriodHousePropertyNewSalesPriceTrendData"
                        class="h147"
                        @changeXAxisTimeType="inventorySalesPeriodHousePropertyNewSalesPriceTrendData.xAxisTimeType = $event"
                        @click="fullSc('lineHousePropertyNewSalesPriceTrend', inventorySalesPeriodHousePropertyNewSalesPriceTrendData, 'inventorySalesPeriodHousePropertyNewSalesPriceTrend')"
                    ></line-house-property-new-sales-price-trend>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="inventory-sales-period-scatter">
              <div class="inventory-sales-period-scatter-btns">
                <div class="inventory-sales-period-scatter-btn"
                     :class="{ 'active-inventory-sales-period-scatter-btn': item.value === currentInventorySalesPeriodScatterType }" v-for="(item, index) of [
                  {
                    value: 'area',
                    label: '地区',
                  },
                  {
                    value: 'developers',
                    label: '开发商',
                  },
              ]" :key="index" @click="changeInventorySalesPeriodScatterType(item.value)">
                  {{ item.label }}
                </div>
              </div>
              <scatter-inventory-sales-period
                v-if="inventorySalesPeriodScatterData.series?.length"
                ref="inventorySalesPeriodScatter"
                :scatterData="inventorySalesPeriodScatterData"
                class="h147"
                style="position: relative; z-index: 1"
                @click="fullSc('scatterInventorySalesPeriod', inventorySalesPeriodScatterData)"
              ></scatter-inventory-sales-period>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
          v-if="magnifyData.dialogVisible"
          ref="dialogRef"
          :is="magnifyData.componentName"
          :dialogData="{fontSizeTimes: 2}"
          v-bind="{...magnifyData.props}"
          @dialogEmit="dialogEmit"
      ></component>
    </el-dialog>
  </div>
</template>
<script>
import barImpactFactorImportanceRanking from '@/components/housePropertyAnalysis/analysis/barImpactFactorImportanceRanking.vue'
import lineHousePropertyNewSalesPriceTrend from '@/components/housePropertyAnalysis/analysis/lineHousePropertyNewSalesPriceTrend.vue'
import barSalesTrendNewSalesStatistics from '@/components/housePropertyAnalysis/analysis/barSalesTrendNewSalesStatistics.vue'
import radarSalesTrendHouseConditionStatistics from '@/components/housePropertyAnalysis/analysis/radarSalesTrendHouseConditionStatistics.vue'
import boxplotSalesTrend from '@/components/housePropertyAnalysis/analysis/boxplotSalesTrend.vue'
import pie from '@/components/housePropertyAnalysis/analysis/pie.vue'
import singleLine from '@/components/housePropertyAnalysis/analysis/singleLine.vue'
import lineHousePropertyConditionChart from '@/components/housePropertyAnalysis/analysis/lineHousePropertyConditionChart.vue'
import lineBar from "@/components/housePropertyAnalysis/analysis/lineBar.vue";
import scatterInventorySalesPeriod from "@/components/housePropertyAnalysis/analysis/scatterInventorySalesPeriod.vue";
import scatter from "@/components/housePropertyAnalysis/analysis/scatter.vue";

export default {
  components: {
    barImpactFactorImportanceRanking,
    lineHousePropertyNewSalesPriceTrend,
    barSalesTrendNewSalesStatistics,
    radarSalesTrendHouseConditionStatistics,
    boxplotSalesTrend,
    pie,
    singleLine,
    lineHousePropertyConditionChart,
    lineBar,
    scatterInventorySalesPeriod,
    scatter
  },
};
</script>
<script setup>
import {computed, nextTick, onMounted, ref, watch} from "vue";
import mapBox from "@/components/housePropertyAnalysis/statistics/map.vue";
import lineHousePropertyCondition from "@/components/housePropertyAnalysis/analysis/lineHousePropertyCondition.vue";
import timeFiltratePublic from "@/components/housePropertyAnalysis/timeFiltratePublic.vue";
import { useRouter } from "vue-router";
import {getRandomColor, processBoxPlotData} from "@/utils/index";
import {
  getSupplyDemandAanalysisSalesTrends, // 房地产销售趋势分析-影响因子重要程度排行-顶部top信息-柱形图-bar
  getSupplyDemandAnalyzeSalesPriceTrend, // 房地产销售趋势分析-房地产新增销量价格走势-折线图-line
  getSupplyDemandNewHouseSales, // 房地产销售趋势分析-新增销售情况统计-柱形图-bar
  getSupplyDemandSalesHouseAnalysis, // 房地产销售趋势分析-房屋情况统计-雷达图-radar
  getSupplyDemandSalesPriceAnalysis, // 房地产销售趋势分析-价格分布-盒须图-boxplot
  getSupplyDemandSalesAreaAnalysis, // 房地产销售趋势分析-面积分布-盒须图-boxplot
  getSupplyDemandSalesAnalysis,  // 房地产销售情况
  getSupplyDemandAnalyzeSalesMovement,  // 房地产销售走势
  getSupplyDemandAnalyzeHouseSupply,  // 房地产供需情况
  getSupplyDemandRealEstateSupplyDemandTrend, // 房地产供需走势
  getSupplyDemandRankImpactFactors, // 影响因子
  getSupplyDemandTrendNewSupplyDemand, // 房地产供需矛盾分析-房地产新增供需走势
  getSupplyDemandStopBuild, // 房地产停缓建项目交付趋势-顶部top和扇形图
  getSupplyDemandAnalyzeRealEstateTrend, // 房地产停缓建项目交付趋势-房地停缓建项目走势
  getSupplyDemandAnalyzeMacroeconomic, // 房地产各区库存及去化周期情况统计-商品房去化周期-scatter图
  getSupplyDemandGetREInventoryCycle, // 房地产各区库存及去化周期情况统计-顶部topInfo
  getSupplyDemandGetREInventoryRight, // 房地产各区库存及去化周期情况统计-房地产销量价格走势
  getSupplyDemandGetRegion, // 根据选择城市获得城市下拉选-各模块顶部筛选
  transanalysisListingSituationAnalysis, // 房地产新增供需分布-散点图
} from "@/api/housePropertyAnalysis/analysis";

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: '',
  moduleName: ''
})

const router = useRouter();

const currentYear = ref(null) // 当前年份

const salesTrendHouseConditionStatisticsMonthPicker = ref('') // 房地产销售趋势分析-房屋情况统计-单月筛选
const salesTrendPriceDistributionMonthPicker = ref('') // 房地产销售趋势分析-价格分布-单月筛选
const salesTrendArealDistributionMonthPicker = ref('') // 房地产销售趋势分析-面积分布-单月筛选

const cityAndAreaList = ref([]) // 公共顶部时间筛选城市区列表


watch(
    () => salesTrendHouseConditionStatisticsMonthPicker.value,// 房地产销售趋势分析-房屋情况统计-监听单月
    (newVal, oldVal) => {
      if (!oldVal) return
      initSalesTrendHouseConditionStatisticsData(cityObj.value.code)
    }
)
watch(
    () => salesTrendPriceDistributionMonthPicker.value, // 房地产销售趋势分析-价格分布-监听单月
    (newVal, oldVal) => {
      if (!oldVal) return
      initSalesTrendPriceDistributionData(cityObj.value.code)
    }
)
watch(
    () => salesTrendArealDistributionMonthPicker.value, // 房地产销售趋势分析-面积分布-监听单月
    (newVal, oldVal) => {
      if (!oldVal) return
      initSalesTrendArealDistributionData(cityObj.value.code)
    }
)

const currentYearMonthDay = ref(null) // 当前年月日
const cityObj = ref({
  name: '沈阳市',
  code: '210100'
}) // 地图-市名
const mapList = ref([
  {name: '沈阳市', value: 0, code: '210100', select: { disabled: false }, selected: true, },
  {name: '大连市', value: 0, code: '210200', select: { disabled: true }},
  {name: '鞍山市', value: 0, code: '210300', select: { disabled: true }},
  {name: '抚顺市', value: 0, code: '210400', select: { disabled: true }},
  {name: '本溪市', value: 0, code: '210500', select: { disabled: true }},
  {name: '丹东市', value: 0, code: '210600', select: { disabled: true }},
  {name: '锦州市', value: 0, code: '210700', select: { disabled: true }},
  {name: '营口市', value: 0, code: '210800', select: { disabled: true }},
  {name: '阜新市', value: 0, code: '210900', select: { disabled: true }},
  {name: '辽阳市', value: 0, code: '211000', select: { disabled: true }},
  {name: '盘锦市', value: 0, code: '211100', select: { disabled: true }},
  {name: '铁岭市', value: 0, code: '211200', select: { disabled: true }},
  {name: '朝阳市', value: 0, code: '211300', select: { disabled: true }},
  {name: '葫芦岛市', value: 0, code: '211400', select: { disabled: true }},
])
const mainType = ref('analysis') // 页面主tab
const mainTypeLabel = computed(() => { // 页面主tab文案
  switch (mainType.value) {
    case 'statistics':
      return '统计';
    case 'analysis':
      return '分析';
    case 'forecast':
      return '模拟测算';
    default:
      return '统计'
  }
})

const housePropertySalesTrendAnalysisTopinfo = ref([ // 房地产销售趋势分析-顶部信息list
  {
    label: '房地产销售额',
    value: null,
    unit: '万元',
    yoyPercentage: null,
    qoqPercentage: null
  },
  {
    label: '房地产销售面积',
    value: null,
    unit: '万㎡',
    yoyPercentage: null,
    qoqPercentage: null
  },
  {
    label: '均价',
    value: null,
    unit: '元',
    yoyPercentage: null,
    qoqPercentage: null
  }
])
const housePropertySalesTrendAnalysisTimeConfig = ref({ // 房地产销售趋势分析-顶部默认筛选-data
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})
const currentSalesTrendHousePropertyNewSalesPriceTrendSelect = ref(1) // 当前房地产销量价格走势select-value
const salesTrendHousePropertyNewSalesPriceTrendSelectList = ref([ // 房地产销量价格走势select列表
  {
    id: 1,
    value: '销售套数',
    unit: '万套'
  },
  {
    id: 2,
    value: '销售面积',
    unit: '万㎡'
  },
  {
    id: 3,
    value: '销售金额',
    unit: '万元'
  },
  {
    id: 4,
    value: '均价',
    unit: '元'
  }
])

const salesTrendImpactFactorImportanceRankingData = ref({ // 房地产销售趋势分析-影响因子重要程度排名
  yAxisData: [],
  seriesData: [],
  currentBarIndex: 0,
  interval: null
})
watch( // 房地产销售趋势分析-影响因子重要程度排名-滚动监听
    () => salesTrendImpactFactorImportanceRankingData.value.currentBarIndex,
    (newVal) => {
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'salesTrendImpactFactorImportanceRanking') {
        magnifyData.value.props.intervalData.currentBarIndex = newVal
      }
      if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineHousePropertyNewSalesPriceTrend') {
        magnifyData.value.props.lineData.yAxisRightLabel = salesTrendImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
        magnifyData.value.props.lineData.legendData[1].name = salesTrendImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      }
      housePropertyNewSalesPriceTrendData.value.yAxisRightLabel = salesTrendImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      housePropertyNewSalesPriceTrendData.value.legendData[1].name = salesTrendImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      initHousePropertyNewSalesPriceTrendData(housePropertySalesTrendAnalysisTimeConfig.value.areaCode, housePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
    }
)
const salesTrendImpactFactorImportanceRanking = ref(null) // 房地产销售趋势分析-影响因子重要程度排名-domref

const housePropertyNewSalesPriceTrendData = ref({ // 房地产销售趋势分析-房地产新增销量价格走势-data
  legendData: [],
  xAxisData: [],
  seriesData: [],
  yAxisLeftLabel: '万套',
  yAxisRightLabel: '',
  xAxisTimeType: 'year',
  moduleName: 'housePropertyNewSalesPriceTrend'
})
const housePropertyNewSalesPriceTrend = ref(null) // 房地产销售趋势分析-房地产新增销量价格走势-domref
watch( // 房地产销售趋势分析-房地产新增销量价格走势-监听x轴年月切换
    () => housePropertyNewSalesPriceTrendData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertyNewSalesPriceTrendData(housePropertySalesTrendAnalysisTimeConfig.value.areaCode, housePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
    }
)

const currentHousePropertySalesTrendAnalysisTab = ref(1) // 当前房地产销售趋势分析tab
const housePropertySalesTrendAnalysisTab = ref([ // 房地产销售趋势分析tabs-list
  {
    id: 1,
    label: '地区',
  },
  {
    id: 2,
    label: '开发商'
  },
  {
    id: 3,
    label: '户型'
  },
  {
    id: 4,
    label: '面积'
  }
])

const salesTrendNewSalesStatisticsData = ref({ //  房地产销售趋势分析-新增销售情况统计-data
  xAxisData: [],
  seriesData: []
})
const salesTrendNewSalesStatistics = ref(null) // 房地产销售趋势分析-新增销售情况统计-domref
const housePropertySalesTrendNewSalesStatisticsTimeConfig = ref({ // 房地产销售趋势分析-新增销售情况统计-顶部默认筛选-data
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})

const salesTrendHouseConditionStatisticsData = ref({ //  房地产销售趋势分析-房屋情况统计-data
  legendData: [],
  indicatorData: [],
  seriesData: []
})
const salesTrendHouseConditionStatistics = ref(null) // 房地产销售趋势分析-房屋情况统计-domref

const salesTrendPriceDistributionData = ref({ //  房地产销售趋势分析-价格分布-data
  xAxisData: [],
  boxData: [],
  xAxisBgColor: [],
  scatterData: [],
  yAxisMaxNumArray: [],
  yAxisName: '万元'
})
const salesTrendPriceDistribution = ref(null) // 房地产销售趋势分析-价格分布-domref

const salesTrendArealDistributionData = ref({ //  房地产销售趋势分析-面积分布-data
  xAxisData: [],
  boxData: [],
  xAxisBgColor: [],
  scatterData: [],
  yAxisMaxNumArray: [],
  yAxisName: '万㎡'
})
const salesTrendArealDistribution = ref(null) // 房地产销售趋势分析-面积分布-domref

const deferredConstructionProjectReasonsStatisticsTopinfo = ref( { // 房地产停缓建项目交付趋势-顶部info
  label: '房地产停缓建项目',
  value: null,
  unit: '万元',
  yoyPercentage: null, // 同比
  qoqPercentage: null, // 环比
})
const deferredConstructionProjectReasonsStatisticsData = ref({ // 房地产停缓建项目交付趋势-停缓建项目原因统计-data
  seriesData: [],
  areaCode: cityObj.value.code
})
const deferredConstructionProjectReasonsStatistics = ref(null) // 房地产停缓建项目交付趋势-停缓建项目原因统计-domref

const housePropertyDeferredConstructionProjectTrendData = ref({ // 房地产停缓建项目交付趋势-房地产停缓建项目走势-data
  xAxisData: [],
  seriesData: [],
  xAxisTimeType: 'year',
  moduleName: 'housePropertyDeferredConstructionProjectTrend'
})
const housePropertyDeferredConstructionProjectTrend = ref(null) // 房地产停缓建项目交付趋势-房地产停缓建项目走势-domref
watch( // 房地产停缓建项目交付趋势-房地产停缓建项目走势-监听x轴年月切换
    () => housePropertyDeferredConstructionProjectTrendData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertyDeferredConstructionProjectTrendData()
    }
)

const housePropertySalesConditionData = ref({ // 房地产销售情况Data
  xAxisData: [],
  seriesData: [],
  xAxisTimeType: 'year',
  moduleName: 'housePropertySalesCondition'
})
watch( // 房地产销售情况-销售走势-监听x轴年月切换
    () => housePropertySalesConditionData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertySalesConditionChartData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
    }
)
const housePropertySalesConditionInfoList = ref([ // 房地产销售情况-顶部信息-data
  [
    {
      id: 1,
      label: '销售额',
      value: null,
      unit: '万元',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    },
    {
      id: 2,
      label: '销售面积',
      value: null,
      unit: '万㎡',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    },
  ],
  [
    {
      id: 3,
      label: '销售套数',
      value: null,
      unit: '万套',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    },
    {
      id: 4,
      label: '销售均价',
      value: null,
      unit: '元',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    },
  ]
])
const housePropertySalesCondition = ref(null) // 房地产销售情况-domref
const housePropertySalesConditionTabList =ref([ // 房地产销售走势tabs
  {
    id: 1,
    label: '销售套数',
    unit: '万套'
  },
  {
    id: 2,
    label: '销售面积',
    unit: '万㎡'
  },
  {
    id: 3,
    label: '销售金额',
    unit: '万元'
  },
  {
    id: 4,
    label: '均价',
    unit: '元'
  }
])
const currentHousePropertySalesConditionTab =ref(1) // 当前房地产销售走势tab
const housePropertySalesConditionTimeConfig = ref({ // 房地产销售情况-默认顶部筛选
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})
const currentHousePropertySalesConditionHouseType = ref(null) // 当前房地产销售走势-户型select-value
const currentHousePropertySalesConditionAcreage = ref(null) // 当前房地产销售走势-面积select-value

const housePropertySupplyDemandConditionData = ref({ // 房地产供需情况-data
  xAxisData: [],
  seriesData: [],
  xAxisTimeType: 'year',
  moduleName: 'housePropertySupplyDemandCondition'
})
watch( // 房地产供需情况-供需走势-监听x轴年月切换
    () => housePropertySupplyDemandConditionData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertySupplyDemandConditionChartData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需走势
    }
)
const housePropertySupplyDemandConditionInfoList = ref([ // 房地产供需情况-顶部信息-data
  [
    {
      id: 1,
      label: '供应面积',
      value: null,
      unit: '万㎡',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    },
    {
      id: 2,
      label: '销售面积',
      value: null,
      unit: '万㎡',
      yoyPercentage: null, // 同比
      qoqPercentage: null // 环比
    }
  ],
  [
    {
      id: 3,
      label: '供应套数',
      value: null,
      unit: '万套',
      yoyPercentage: null, // 同比
      qoqPercentage: null // 环比
    },
    {
      id: 4,
      label: '销售套数',
      value: null,
      unit: '万套',
      yoyPercentage: null, // 同比
      qoqPercentage: null, // 环比
    }
  ]
])
const housePropertySupplyDemandCondition = ref(null) // 房地产供需情况-domref
const housePropertySupplyDemandConditionTabList = ref([ // 房地产供需情况tabs
  {
    id: 1,
    label: '销售套数',
    unit: '万套'
  },
  {
    id: 2,
    label: '销售面积',
    unit: '万㎡'
  }
])
const currentHousePropertySupplyDemandConditionTab = ref(1) // 当前房地产供需走势tab
const housePropertySupplyDemandConditionTimeConfig = ref({ // 房地产供需情况-默认顶部筛选
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})
const currentHousePropertySupplyDemandConditionHouseType = ref(null) // 当前房地产供需走势-户型select-value
const currentHousePropertySupplyDemandConditionAcreage = ref(null) // 当前房地产供需走势-面积select-value

const housePropertySupplyDemandContradictionAnalysisTopinfo = ref([ // 房地产供需矛盾分析-顶部info
  {
    label: '房地产供给',
    value: null,
    unit: '万套',
    yoyPercentage: null, // 同比
    qoqPercentage: null, // 环比
  },
  {
    label: '房地产销售',
    value: null,
    unit: '万套',
    yoyPercentage: null, // 同比
    qoqPercentage: null, // 环比
  }
])
const housePropertySupplyDemandContradictionAnalysisTimeConfig = ref({ // 房地产供需矛盾分析-默认顶部筛选-data
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})
const currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab = ref(2) // 当前房地产供需矛盾分析-影响因子tab

const supplyDemandContradictionAnalysisImpactFactorImportanceRankingData = ref({ // 房地产供需矛盾分析-影响因子重要程度排名-data
  yAxisData: [],
  seriesData: [],
  currentBarIndex: 0,
  interval: null
})
const supplyDemandContradictionAnalysisImpactFactorImportanceRanking = ref(null) // 房地产供需矛盾分析-影响因子重要程度排名-domref
watch( // 房地产供需矛盾分析-影响因子重要程度排名-滚动监听
    () => supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.currentBarIndex,
    (newVal) => {
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'supplyDemandContradictionAnalysisImpactFactorImportanceRanking') {
        magnifyData.value.props.intervalData.currentBarIndex = newVal
      }
      const tempName = supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      housePropertySupplyDemandTrendData.value.legendData[0].name = tempName
      housePropertySupplyDemandTrendData.value.firstLegendLabel = tempName

      if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineBar') {
        magnifyData.value.props.lineBarData.firstLegendLabel = tempName
        magnifyData.value.props.lineBarData.legendData[0].name = tempName
      }
      initHousePropertySupplyDemandTrendData(housePropertySupplyDemandContradictionAnalysisTimeConfig.value.areaCode, currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab.value, housePropertySupplyDemandTrendData.value.firstLegendLabel)
    }
)

const housePropertySupplyDemandTrendData = ref({ // 房地产供需矛盾分析-房地产新增供需走势-data
  legendData: [],
  xAxisData: [],
  barData: [],
  lineData: [],
  firstLegendLabel: '',
  xAxisTimeType: 'year',
  moduleName: 'housePropertySupplyDemandTrend'
})
watch( // 房地产供需矛盾分析-房地产新增供需走势-监听x轴年月切换
    () => housePropertySupplyDemandTrendData.value.xAxisTimeType,
    (newVal) => {
      initHousePropertySupplyDemandTrendData(housePropertySupplyDemandContradictionAnalysisTimeConfig.value.areaCode, currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab.value, housePropertySupplyDemandTrendData.value.firstLegendLabel)
    }
)
const housePropertySupplyDemandTrend = ref(null) // 房地产供需矛盾分析-房地产新增供需走势-domref

const distributionList = ref({ // 新增供需分布select-list
  cityList: [
    {
      value: '沈阳市'
    },
    {
      value: '和平区'
    },
    {
      value: '于洪区'
    },
    {
      value: '皇姑区'
    },
    {
      value: '苏家屯区'
    }
  ],
  houseTypeList: [
    {
      id: 0,
      value: '全部户型'
    },
    {
      id: 1,
      value: '一居室'
    },
    {
      id: 2,
      value: '二居室'
    },
    {
      id: 3,
      value: '三居室'
    },
    {
      id: 4,
      value: '四居室'
    },
    {
      id: 5,
      value: '五居室'
    },
  ],
  acreageList: [
    {
      id: 0,
      value: '全部面积'
    },
    {
      id: 1,
      value: '小于90㎡'
    },
    {
      id: 2,
      value: '90-144㎡'
    },
    {
      id: 3,
      value: '大于144㎡'
    },
  ]
})
const newSupplyDemandDistributionData = ref({ // 房地产供需矛盾分析-新增供需分布-data
  seriesData: [],
  areaCode: cityObj.value.code, // 新增供需分布区筛选vmodel
  currentDistributionHouseType: '全部户型', // 新增供需分布户型筛选vmodel
  currentDistributionAcreage: '全部面积', // 新增供需分布面积筛选vmodel
  type: 2,
  startTime: '',
  endTime: ''
})
const newSupplyDemandDistribution = ref(null) // 房地产供需矛盾分析-新增供需分布-domref

const housePropertyAreaInventorySalesPeriodConditionStatistics = ref( { // 房地产各区库存及去化周期情况统计-顶部信息-data
  label: '房地产平均去化周期',
  value: null,
  unit: '',
  yoyPercentage: null, // 同比
  qoqPercentage: null, // 环比
})
const inventorySalesPeriodImpactFactorImportanceRankingData = ref({ // 房地产各区库存及去化周期情况统计-影响因子重要程度排名-data
  yAxisData: [],
  seriesData: [],
  currentBarIndex: 0,
  interval: null
})
const inventorySalesPeriodImpactFactorImportanceRanking = ref(null) // 房地产各区库存及去化周期情况统计-影响因子重要程度排名-domref
watch( // 房地产各区库存及去化周期情况统计-影响因子重要程度排名-滚动监听
    () => inventorySalesPeriodImpactFactorImportanceRankingData.value.currentBarIndex,
    (newVal) => {
      if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'inventorySalesPeriodImpactFactorImportanceRanking') {
        magnifyData.value.props.intervalData.currentBarIndex = newVal
      }
      if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'inventorySalesPeriodHousePropertyNewSalesPriceTrend') {
        magnifyData.value.props.lineData.yAxisRightLabel = inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
        magnifyData.value.props.lineData.legendData[1].name = inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      }
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel = inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.legendData[1].name = inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.[newVal]
      initInventorySalesPeriodHousePropertyNewSalesPriceTrendData(areaInventorySalesPeriodConditionTimeConfig.value.areaCode, currentInventorySalesPeriodImpactFactorImportanceRankingTab.value, inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
    }
)
const areaInventorySalesPeriodConditionTimeConfig = ref({ // 房地产各区库存及去化周期情况统计-顶部默认筛选-data
  areaCode: cityObj.value.code,
  type: 2,
  startTime: '',
  endTime: ''
})

const inventorySalesPeriodHousePropertyNewSalesPriceTrendData = ref({ // 房地产各区库存及去化周期情况统计-房地产销量价格走势-data
  legendData: [],
  xAxisData: [],
  seriesData: [],
  yAxisLeftLabel: '',
  yAxisRightLabel: '',
  xAxisTimeType: 'year',
  moduleName: 'inventorySalesPeriodHousePropertyNewSalesPriceTrend'
})
const inventorySalesPeriodHousePropertyNewSalesPriceTrend = ref(null) // 房地产各区库存及去化周期情况统计-房地产销量价格走势-domref
const currentInventorySalesPeriodImpactFactorImportanceRankingTab = ref(4) // 房地产各区库存及去化周期情况统计-影响因子tab
watch( // 房地产各区库存及去化周期情况统计-房地产销量价格走势-监听x轴年月切换
    () => inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisTimeType,
    (newVal) => {
      initInventorySalesPeriodHousePropertyNewSalesPriceTrendData(areaInventorySalesPeriodConditionTimeConfig.value.areaCode, currentInventorySalesPeriodImpactFactorImportanceRankingTab.value, inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
    }
)

const inventorySalesPeriodScatterData = ref({ // 房地产各区库存及去化周期情况统计-scatter图-data
  areaNameList: [], // 区列表
  timelineList: [], // 时间线
  series: [] // 渲染数据
})
const inventorySalesPeriodScatter = ref(null) // 房地产各区库存及去化周期情况统计-scatter图-domref
const currentInventorySalesPeriodScatterType = ref('area') // 房地产各区库存及去化周期情况统计-scatter图-tab

const dialogRef = ref(null) // chart图放大-domref

const initHousePropertySalesTrendAnalysisTopInfoData = (timeConfig) => { // 房地产销售趋势分析-顶部top信息
  getSupplyDemandSalesAnalysis({
    adcode: timeConfig.areaCode,
    requestType: timeConfig.type,
    startTime: timeConfig.startTime || undefined,
    endTime: timeConfig.endTime || undefined
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertySalesTrendAnalysisTopinfo.value[0].value = resData?.yxzxsje
      housePropertySalesTrendAnalysisTopinfo.value[0].yoyPercentage = resData?.yxzxsjeTb
      housePropertySalesTrendAnalysisTopinfo.value[0].qoqPercentage = resData?.yxzxsjeHb
      housePropertySalesTrendAnalysisTopinfo.value[1].value = resData?.yxzxsmj
      housePropertySalesTrendAnalysisTopinfo.value[1].yoyPercentage = resData?.yxzxsmjTb
      housePropertySalesTrendAnalysisTopinfo.value[1].qoqPercentage = resData?.yxzxsmjHb
      housePropertySalesTrendAnalysisTopinfo.value[2].value = resData?.yxzxsdj
      housePropertySalesTrendAnalysisTopinfo.value[2].yoyPercentage = resData?.yxzxsdjTb
      housePropertySalesTrendAnalysisTopinfo.value[2].qoqPercentage = resData?.yxzxsdjHb
    }
  }).catch(error => {
    console.log(error);
  })
}

const initHousePropertyNewSalesPriceTrendData = (cityCode, impactFactorType = '') => { // 房地产销售趋势分析-房地产新增销量价格走势
  if (!impactFactorType) return housePropertyNewSalesPriceTrendData.value.xAxisData = []

  getSupplyDemandAnalyzeSalesPriceTrend({
    adcode: cityCode,
    requestType: currentSalesTrendHousePropertyNewSalesPriceTrendSelect.value,
    dateType: housePropertyNewSalesPriceTrendData.value.xAxisTimeType === 'month' ? 1 : 2,
    impactFactorType
  }).then(res => {
    const resData = res?.data
    if (resData?.dateList?.length) {
      housePropertyNewSalesPriceTrendData.value.xAxisData = resData?.dateList;
      housePropertyNewSalesPriceTrendData.value.xAxisData.unshift(Number(housePropertyNewSalesPriceTrendData.value.xAxisData[0]) - 1)
    }
    if (resData?.impactFactorList?.length && resData?.salesList?.length) {
      housePropertyNewSalesPriceTrendData.value.seriesData = []
      housePropertyNewSalesPriceTrendData.value.seriesData = [
        [0, ...resData?.salesList],
        [0, ...resData?.impactFactorList]
      ]
      const tempLeftLegendName = salesTrendHousePropertyNewSalesPriceTrendSelectList.value.find(x => x.id === currentSalesTrendHousePropertyNewSalesPriceTrendSelect.value)?.value
      housePropertyNewSalesPriceTrendData.value.legendData = [
        {
          name: tempLeftLegendName,
          icon: 'rect',
          itemStyle: {
            color: '#F8F364'
          }
        },
        {
          name: housePropertyNewSalesPriceTrendData.value.yAxisRightLabel,
          icon: 'rect',
          itemStyle: {
            color: '#0E81FF'
          },
        }
      ]
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (housePropertyNewSalesPriceTrendData.value.xAxisData?.length) housePropertyNewSalesPriceTrend.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineHousePropertyNewSalesPriceTrend') {
      dialogRef.value.updateChart();
    }
  })
}

const initSalesTrendNewSalesStatisticsData = (areaCode, timeConfig) => { //  房地产销售趋势分析-新增销售情况统计
  let tempTimeArray = []
  tempTimeArray.push(timeConfig.startTime)
  switch(timeConfig.type) {
    case 1:
    case 2:
      tempTimeArray.push(timeConfig.startTime)
      break;
    default:
      tempTimeArray.push(timeConfig.endTime)
      break;
  }
  getSupplyDemandNewHouseSales({
    adcode: areaCode,
    requestType: currentHousePropertySalesTrendAnalysisTab.value,
    dateType: timeConfig.type,
    startTime: tempTimeArray[0],
    endTime: tempTimeArray[1]
  }).then(res => {
    const resData = res?.data
    salesTrendNewSalesStatisticsData.value.xAxisData = []
    salesTrendNewSalesStatisticsData.value.seriesData = [[], [], []]
    if (resData?.length) {
      resData.forEach((x, i) => {
        salesTrendNewSalesStatisticsData.value.xAxisData.push(x.name)
        salesTrendNewSalesStatisticsData.value.seriesData[0].push(x.amount)
        salesTrendNewSalesStatisticsData.value.seriesData[1].push(x.area)
        salesTrendNewSalesStatisticsData.value.seriesData[2].push(x.price)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (salesTrendNewSalesStatisticsData.value.xAxisData?.length) salesTrendNewSalesStatistics.value.updateChart();
  })
}

const initSalesTrendHouseConditionStatisticsData = (cityCode) => { //  房地产销售趋势分析-房屋情况统计
  getSupplyDemandSalesHouseAnalysis({
    adcode: cityCode,
    requestType: currentHousePropertySalesTrendAnalysisTab.value,
    endTime: salesTrendHouseConditionStatisticsMonthPicker.value || undefined
  }).then(res => {
    const resData = res?.data
    salesTrendHouseConditionStatisticsData.value.legendData = []
    salesTrendHouseConditionStatisticsData.value.indicatorData = []
    salesTrendHouseConditionStatisticsData.value.seriesData = []
    if (resData?.length) {
      const tempResData = resData
      if (tempResData[0]?.entityList?.length) {
        tempResData[0]?.entityList?.forEach((y, j) => { // 雷达图周围数据list
          salesTrendHouseConditionStatisticsData.value.indicatorData.push({
            name: y?.fwlxName
          })
        })
        tempResData.forEach((x, i) => {
          let tempArray = []
          const tempColor = getRandomColor();
          salesTrendHouseConditionStatisticsData.value.legendData.push({
            name: x.typeName,
            itemStyle: {
              color: tempColor
            }
          })
          salesTrendHouseConditionStatisticsData.value.indicatorData.forEach((z, k) => {
            tempArray.push(x?.entityList?.[k]?.fwlxNum || 0)
          })
          salesTrendHouseConditionStatisticsData.value.seriesData.push(
              {
                symbol: "none",
                value:  tempArray,
                name: x.typeName,
                areaStyle: {
                  normal: {
                    color: tempColor,
                    opacity: 0.5
                  }
                }
              }
          )
        })
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (salesTrendHouseConditionStatisticsData.value.seriesData?.length) salesTrendHouseConditionStatistics.value.updateChart();
  })
}

const initSalesTrendPriceDistributionData = (cityCode) => { //  房地产销售趋势分析-价格分布
  getSupplyDemandSalesPriceAnalysis({
    adcode: cityCode,
    requestType: currentHousePropertySalesTrendAnalysisTab.value,
    endTime: salesTrendPriceDistributionMonthPicker.value || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      salesTrendPriceDistributionData.value.xAxisData = []
      salesTrendPriceDistributionData.value.boxData = []
      salesTrendPriceDistributionData.value.xAxisBgColor = []
      salesTrendPriceDistributionData.value.yAxisMaxNumArray = []
      resData?.forEach(x => {
        salesTrendPriceDistributionData.value.xAxisData.push(x.name)
        salesTrendPriceDistributionData.value.boxData.push(x.priceList)
        let color = ''
        switch(x.jgfzfw) {
          case '偏低':
            color = '#FFC352';
            break;
          case '稳定':
            color = '#5ABE52';
            break;
          default: // 分布不平衡
            color = '#1FB7FF';
            break;
        }
        salesTrendPriceDistributionData.value.xAxisBgColor.push(color)
      })
      const yAxisMaxNum = Math.max(...salesTrendPriceDistributionData.value.boxData?.flat())
      salesTrendPriceDistributionData.value.xAxisData.forEach(x => {
        salesTrendPriceDistributionData.value.yAxisMaxNumArray.push(yAxisMaxNum)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (salesTrendPriceDistributionData.value.xAxisData?.length) salesTrendPriceDistribution.value.updateChart();
  })
}

const initSalesTrendArealDistributionData = (cityCode) => { //  房地产销售趋势分析-面积分布
  getSupplyDemandSalesAreaAnalysis({
    adcode: cityCode,
    requestType: currentHousePropertySalesTrendAnalysisTab.value,
    endTime: salesTrendArealDistributionMonthPicker.value || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      salesTrendArealDistributionData.value.xAxisData = []
      salesTrendArealDistributionData.value.boxData = []
      salesTrendArealDistributionData.value.xAxisBgColor = []
      salesTrendArealDistributionData.value.yAxisMaxNumArray = []
      resData?.forEach(x => {
        salesTrendArealDistributionData.value.xAxisData.push(x.name)
        salesTrendArealDistributionData.value.boxData.push(x.priceList)
        let color = ''
        switch(x.jgfzfw) {
          case '偏低':
            color = '#FFC352';
            break;
          case '稳定':
            color = '#5ABE52';
            break;
          default: // 分布不平衡
            color = '#1FB7FF';
            break;
        }
        salesTrendArealDistributionData.value.xAxisBgColor.push(color)
      })
      salesTrendArealDistributionData.value.boxData.reverse();
      const yAxisMaxNum = Math.max(...salesTrendArealDistributionData.value.boxData?.flat())
      salesTrendArealDistributionData.value.xAxisData.forEach(x => {
        salesTrendArealDistributionData.value.yAxisMaxNumArray.push(yAxisMaxNum)
      })
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (salesTrendArealDistributionData.value.xAxisData?.length) salesTrendArealDistribution.value.updateChart();
  })
}

const initDeferredConstructionProjectReasonsStatisticsData = () => { //  停缓建项目原因统计
  getSupplyDemandStopBuild({
    adcode: deferredConstructionProjectReasonsStatisticsData.value.areaCode,
  }).then(res => {
    const resData = res?.data
    if (resData) {
      deferredConstructionProjectReasonsStatisticsTopinfo.value.value = resData?.sumEntry?.sum
      deferredConstructionProjectReasonsStatisticsTopinfo.value.yoyPercentage = resData?.sumEntry?.sumTb
      deferredConstructionProjectReasonsStatisticsTopinfo.value.qoqPercentage = resData?.sumEntry?.sumHb
      deferredConstructionProjectReasonsStatisticsData.value.seriesData = []
      if (resData?.leftList?.length) {
        deferredConstructionProjectReasonsStatisticsData.value.seriesData = resData?.leftList?.map(x => {
          return {
            name: x.reason,
            value: x.num,
            percentage: x.numZb,
          }
        })
      }
    }
  }).catch(error => {
    console.log(error);
  })
}

const initHousePropertyDeferredConstructionProjectTrendData = () => { // 房地产停缓建项目走势
  getSupplyDemandAnalyzeRealEstateTrend({
    adcode: deferredConstructionProjectReasonsStatisticsData.value.areaCode,
    dateType: housePropertyDeferredConstructionProjectTrendData.value.xAxisTimeType === 'month' ? 1 : 2,
  }).then(res => {
    const resData = res?.data
    housePropertyDeferredConstructionProjectTrendData.value.xAxisData = [0]
    housePropertyDeferredConstructionProjectTrendData.value.seriesData = [0]
    if (resData?.dateList?.length) {
      housePropertyDeferredConstructionProjectTrendData.value.xAxisData = housePropertyDeferredConstructionProjectTrendData.value.xAxisData.concat(resData?.dateList)
      housePropertyDeferredConstructionProjectTrendData.value.seriesData = housePropertyDeferredConstructionProjectTrendData.value.seriesData.concat(resData?.numList)
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    housePropertyDeferredConstructionProjectTrend.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'singleLine') { // 房地产停缓建项目走势-弹窗
      dialogRef.value.updateChart();
    }
  })
}

const initHousePropertySalesConditionData = (areaCode, timeConfig, isFirstLoad) => { // 房地产销售情况
  getSupplyDemandSalesAnalysis({
    adcode: areaCode,
    requestType: timeConfig.type,
    startTime: timeConfig.startTime || undefined,
    endTime: timeConfig.endTime || undefined
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertySalesConditionInfoList.value[0][0].value = resData?.yxzxsje
      housePropertySalesConditionInfoList.value[0][0].yoyPercentage = resData?.yxzxsjeTb
      housePropertySalesConditionInfoList.value[0][0].qoqPercentage = resData?.yxzxsjeHb
      housePropertySalesConditionInfoList.value[0][1].value = resData?.yxzxsmj
      housePropertySalesConditionInfoList.value[0][1].yoyPercentage = resData?.yxzxsmjTb
      housePropertySalesConditionInfoList.value[0][1].qoqPercentage = resData?.yxzxsmjHb
      housePropertySalesConditionInfoList.value[1][0].value = resData?.yxzxsts
      housePropertySalesConditionInfoList.value[1][0].yoyPercentage = resData?.yxzxstsTb
      housePropertySalesConditionInfoList.value[1][0].qoqPercentage = resData?.yxzxstsHb
      housePropertySalesConditionInfoList.value[1][1].value = resData?.yxzxsdj
      housePropertySalesConditionInfoList.value[1][1].yoyPercentage = resData?.yxzxsdjTb
      housePropertySalesConditionInfoList.value[1][1].qoqPercentage = resData?.yxzxsdjHb
      if (isFirstLoad) { // 房地产销售趋势分析-顶部信息
        housePropertySalesTrendAnalysisTopinfo.value[0].value = resData?.yxzxsje
        housePropertySalesTrendAnalysisTopinfo.value[0].yoyPercentage = resData?.yxzxsjeTb
        housePropertySalesTrendAnalysisTopinfo.value[0].qoqPercentage = resData?.yxzxsjeHb
        housePropertySalesTrendAnalysisTopinfo.value[1].value = resData?.yxzxsmj
        housePropertySalesTrendAnalysisTopinfo.value[1].yoyPercentage = resData?.yxzxsmjTb
        housePropertySalesTrendAnalysisTopinfo.value[1].qoqPercentage = resData?.yxzxsmjHb
        housePropertySalesTrendAnalysisTopinfo.value[2].value = resData?.yxzxsdj
        housePropertySalesTrendAnalysisTopinfo.value[2].yoyPercentage = resData?.yxzxsdjTb
        housePropertySalesTrendAnalysisTopinfo.value[2].qoqPercentage = resData?.yxzxsdjHb
      }
    }
  }).catch(error => {
    console.log(error);
  })
}

const initHousePropertySalesConditionChartData = (areaCode, timeConfig) => { // 房地产销售走势-chart
  getSupplyDemandAnalyzeSalesMovement({
    adcode: areaCode,
    dateType: housePropertySalesConditionData.value.xAxisTimeType === 'month' ? 1 : 2,
    requestType: currentHousePropertySalesConditionTab.value,
    areaType: currentHousePropertySalesConditionAcreage.value === '全部面积' ? null : currentHousePropertySalesConditionAcreage.value || null,
    houseType: currentHousePropertySalesConditionHouseType.value === '全部户型' ? null : currentHousePropertySalesConditionHouseType.value || null,
  }).then(res => {
    const resData = res?.data
    housePropertySalesConditionData.value.xAxisData = [0]
    housePropertySalesConditionData.value.seriesData = [[0]]
    if (resData?.dateList?.length) {
      housePropertySalesConditionData.value.xAxisData = housePropertySalesConditionData.value.xAxisData.concat(resData?.dateList)
      housePropertySalesConditionData.value.seriesData[0] = housePropertySalesConditionData.value.seriesData[0].concat(resData?.salesList)
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    housePropertySalesCondition.value.echartComponentDom.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineHousePropertyConditionChart') {
      dialogRef.value.updateChart();
    }
  })
}
const initHousePropertySupplyDemandConditionData = (areaCode, timeConfig, isFirstLoad) => { // 房地产供需情况
  getSupplyDemandAnalyzeHouseSupply({
    adcode: areaCode,
    requestType: timeConfig.type,
    startTime: timeConfig.startTime || undefined,
    endTime: timeConfig.endTime || undefined
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertySupplyDemandConditionInfoList.value[0][0].value = resData?.yxzgymj
      housePropertySupplyDemandConditionInfoList.value[0][0].yoyPercentage = resData?.yxzgymjTb
      housePropertySupplyDemandConditionInfoList.value[0][0].qoqPercentage = resData?.yxzgymjHb
      housePropertySupplyDemandConditionInfoList.value[0][1].value = resData?.yxzxsmj
      housePropertySupplyDemandConditionInfoList.value[0][1].yoyPercentage = resData?.yxzxsmjTb
      housePropertySupplyDemandConditionInfoList.value[0][1].qoqPercentage = resData?.yxzxsmjHb
      housePropertySupplyDemandConditionInfoList.value[1][0].value = resData?.yxzgyts
      housePropertySupplyDemandConditionInfoList.value[1][0].yoyPercentage = resData?.yxzgytsTb
      housePropertySupplyDemandConditionInfoList.value[1][0].qoqPercentage = resData?.yxzgytsHb
      housePropertySupplyDemandConditionInfoList.value[1][1].value = resData?.yxzxsts
      housePropertySupplyDemandConditionInfoList.value[1][1].yoyPercentage = resData?.yxzxstsTb
      housePropertySupplyDemandConditionInfoList.value[1][1].qoqPercentage = resData?.yxzxstsHb
      if (isFirstLoad) { // 房地产供需矛盾分析-顶部信息
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].value = resData?.yxzgyts
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].yoyPercentage = resData?.yxzgytsTb
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].qoqPercentage = resData?.yxzgytsHb
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].value = resData?.yxzxsts
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].yoyPercentage = resData?.yxzxstsTb
        housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].qoqPercentage = resData?.yxzxstsHb
      }
    }
  }).catch(error => {
    console.log(error);
  })
}
const initHousePropertySupplyDemandConditionChartData = (areaCode, timeConfig) => { // 房地产供需走势-chart
  getSupplyDemandRealEstateSupplyDemandTrend({
    adcode: areaCode,
    dateType: housePropertySupplyDemandConditionData.value.xAxisTimeType === 'month' ? 1 : 2,
    requestType: currentHousePropertySupplyDemandConditionTab.value,
    areaType: currentHousePropertySupplyDemandConditionAcreage.value === '全部面积' ? null : currentHousePropertySupplyDemandConditionAcreage.value || null,
    houseType: currentHousePropertySupplyDemandConditionHouseType.value === '全部户型' ? null : currentHousePropertySupplyDemandConditionHouseType.value || null,
  }).then(res => {
    const resData = res?.data
    housePropertySupplyDemandConditionData.value.xAxisData = [0]
    housePropertySupplyDemandConditionData.value.seriesData = [[0], [0]]
    if (resData?.dateList?.length) {
      housePropertySupplyDemandConditionData.value.xAxisData = housePropertySupplyDemandConditionData.value.xAxisData.concat(resData?.dateList)
      housePropertySupplyDemandConditionData.value.seriesData[0] = housePropertySupplyDemandConditionData.value.seriesData[0].concat(resData?.gyList)
      housePropertySupplyDemandConditionData.value.seriesData[1] = housePropertySupplyDemandConditionData.value.seriesData[1].concat(resData?.salesList)
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    housePropertySupplyDemandCondition.value.echartComponentDom.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineHousePropertyConditionChart') {
      dialogRef.value.updateChart();
    }
  })
}

const initImpactFactorImportanceRanking = (requestType, timeConfig) => { // 总-影响因子
  let tempTimeArray = []
  tempTimeArray.push(timeConfig.startTime)
  switch(timeConfig.type) {
    case 1:
    case 2:
      tempTimeArray.push(timeConfig.startTime)
      break;
    default:
      tempTimeArray.push(timeConfig.endTime)
      break;
  }
  getSupplyDemandRankImpactFactors({
    adcode: timeConfig.areaCode,
    requestType,
    dateType:timeConfig.type,
    startTime: tempTimeArray[0] || undefined,
    endTime: tempTimeArray[1] || undefined
  }).then(res => {
    const resData = res?.data
    if (resData?.length) {
      if ([1].includes(requestType) || !requestType) { // 房地产销售趋势分析-影响因子
        let salesTrendImpactFactor = []
        if (!requestType) {
          salesTrendImpactFactor = resData?.filter(x => x.rlx === '房地产影响因子')?.[0]?.entryList
        } else {
          salesTrendImpactFactor = resData
        }
        if (salesTrendImpactFactor?.length) {
          const resArray = salesTrendImpactFactor
          salesTrendImpactFactorImportanceRankingData.value.yAxisData = [];
          salesTrendImpactFactorImportanceRankingData.value.seriesData = [];
          resArray?.forEach(x => {
            salesTrendImpactFactorImportanceRankingData.value.yAxisData.push(x.name)
            salesTrendImpactFactorImportanceRankingData.value.seriesData.push(x.value)
          })
          housePropertyNewSalesPriceTrendData.value.yAxisRightLabel = salesTrendImpactFactorImportanceRankingData.value.yAxisData?.[0]
          initHousePropertyNewSalesPriceTrendData(housePropertySalesTrendAnalysisTimeConfig.value.areaCode, housePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
          publicInterval(salesTrendImpactFactorImportanceRankingData.value);
        }
      }
      if ([2, 3].includes(requestType) || !requestType) { // 房地产供需矛盾因子
        let supplyDemandContradictionAnalysisSupply = []
        if (!requestType) {
          supplyDemandContradictionAnalysisSupply = resData?.filter(x => x.rlx === requestType === 2 ? '房地产供需矛盾因子' : '销售因子')?.[0]?.entryList
        } else {
          supplyDemandContradictionAnalysisSupply = resData
        }
        if (supplyDemandContradictionAnalysisSupply?.length) {
          const resArray = supplyDemandContradictionAnalysisSupply
          supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData = [];
          supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.seriesData = [];
          resArray?.forEach(x => {
            supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData.push(x.name)
            supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.seriesData.push(x.value)
          })
          housePropertySupplyDemandTrendData.value.firstLegendLabel = supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData?.[0]
          initHousePropertySupplyDemandTrendData(housePropertySupplyDemandContradictionAnalysisTimeConfig.value.areaCode, currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab.value, housePropertySupplyDemandTrendData.value.firstLegendLabel)
          publicInterval(supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value);
        }
      }
      if ([4, 5].includes(requestType) || !requestType) { // 房地产各区库存及去化周期情况统计-影响因子
        let areaInventorySalesPeriodImpactFactor = []
        if (!requestType) {
          areaInventorySalesPeriodImpactFactor = resData?.filter(x => x.rlx === requestType === 4 ? '去化周期因子' : '库存因子')?.[0]?.entryList
        } else {
          areaInventorySalesPeriodImpactFactor = resData
        }
        if (areaInventorySalesPeriodImpactFactor?.length) {
          const resArray = areaInventorySalesPeriodImpactFactor
          inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData = [];
          inventorySalesPeriodImpactFactorImportanceRankingData.value.seriesData = [];
          resArray?.forEach(x => {
            inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData.push(x.name)
            inventorySalesPeriodImpactFactorImportanceRankingData.value.seriesData.push(x.value)
          })
          inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel = inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.[0]
          inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisLeftLabel = !requestType ? '月' : requestType === 4 ? '月' : '万套'
          initInventorySalesPeriodHousePropertyNewSalesPriceTrendData(areaInventorySalesPeriodConditionTimeConfig.value.areaCode, currentInventorySalesPeriodImpactFactorImportanceRankingTab.value, inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
          publicInterval(inventorySalesPeriodImpactFactorImportanceRankingData.value);
        }
      }
    } else {
      if ([1].includes(requestType) || !requestType) { // 房地产销售趋势分析-影响因子
        housePropertyNewSalesPriceTrendData.value.xAxisData = [];
        salesTrendImpactFactorImportanceRankingData.value.yAxisData = [];
      }
      if ([2, 3].includes(requestType) || !requestType) { // 房地产供需矛盾因子
        housePropertySupplyDemandTrendData.value.xAxisData = [];
        supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData = [];
      }
      if ([4, 5].includes(requestType) || !requestType) { // 房地产各区库存及去化周期情况统计-影响因子
        inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData = [];
        inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData = [];
      }
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (([2, 3].includes(requestType) || !requestType) && supplyDemandContradictionAnalysisImpactFactorImportanceRankingData.value.yAxisData?.length) {
      supplyDemandContradictionAnalysisImpactFactorImportanceRanking.value.updateChart();
    }
    if (([4, 5].includes(requestType) || !requestType) && inventorySalesPeriodImpactFactorImportanceRankingData.value.yAxisData?.length) {
      inventorySalesPeriodImpactFactorImportanceRanking.value.updateChart();
    }
  })
}

const initHousePropertySupplyDemandTrendData = (cityCode, requestType, impactFactorType = '') => { // 房地产供需矛盾分析-房地产新增供需走势
  if (!impactFactorType) return housePropertySupplyDemandTrendData.value.xAxisData = []

  let tempRequestType = 0
  tempRequestType = requestType == 2 ? 1 : 2
  getSupplyDemandTrendNewSupplyDemand({
    adcode: cityCode,
    requestType: tempRequestType,
    dateType: housePropertySupplyDemandTrendData.value.xAxisTimeType === 'month' ? 1 : 2,
    impactFactorType
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertySupplyDemandTrendData.value.xAxisData = []
      housePropertySupplyDemandTrendData.value.barData = []
      housePropertySupplyDemandTrendData.value.xAxisData = resData?.dateList
      housePropertySupplyDemandTrendData.value.barData.push(resData?.gyList)
      housePropertySupplyDemandTrendData.value.barData.push(resData?.salesList)
      housePropertySupplyDemandTrendData.value.lineData = resData?.yxyzList
      housePropertySupplyDemandTrendData.value.legendData = [ // 给房地产新增供需走势图例赋值
        {
          name: housePropertySupplyDemandTrendData.value.firstLegendLabel,
          icon: 'rect',
          itemStyle: {
            color: '#0E81FF'
          }
        },
        {
          name: '供给',
          icon: 'rect',
          itemStyle: {
            color: '#5ABE52'
          },
        },
        {
          name: '销量',
          icon: 'rect',
          itemStyle: {
            color: '#F8F364'
          },
        }
      ]
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (housePropertySupplyDemandTrendData.value.xAxisData?.length) housePropertySupplyDemandTrend.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.componentName === 'lineBar') {
      dialogRef.value.updateChart();
    }
  })
}
const initNewSupplyDemandDistributionData = () => { // 房地产供需矛盾分析-新增供需分布
  let tempTimeArray = []
  tempTimeArray.push(newSupplyDemandDistributionData.value.startTime)
  switch(newSupplyDemandDistributionData.value.type) {
    case 1:
    case 2:
      tempTimeArray.push(newSupplyDemandDistributionData.value.startTime)
      break;
    default:
      tempTimeArray.push(newSupplyDemandDistributionData.value.endTime)
      break;
  }
  newSupplyDemandDistributionData.value.seriesData = []
  const apiParams = {
    xzqhdm: newSupplyDemandDistributionData.value.areaCode,
    timeDimension: newSupplyDemandDistributionData.value.type,
    startYearMonth: tempTimeArray[0],
    endYearMonth: tempTimeArray[[1]],
    hx: newSupplyDemandDistributionData.value.currentDistributionHouseType === '全部户型' ? '' : newSupplyDemandDistributionData.value.currentDistributionHouseType,
    mj: newSupplyDemandDistributionData.value.currentDistributionAcreage === '全部面积' ? '' : newSupplyDemandDistributionData.value.currentDistributionAcreage
  }
  transanalysisListingSituationAnalysis(apiParams).then(res => {
    const resData = res?.data?.value
    if (resData?.length) {
      newSupplyDemandDistributionData.value.seriesData = resData
    }
  }).catch(err => {
    console.log(err);
  }).finally(_ => {
    if (newSupplyDemandDistribution.value?.seriesData?.length) {
      newSupplyDemandDistribution.value.updateChart();
    }
  })
}

const initInventorySalesPeriodTopInfoData = (areaCode, timeConfig) => { // 房地产各区库存及去化周期情况统计-顶部topinfo
  getSupplyDemandGetREInventoryCycle({
    adcode: areaCode,
    dateType: timeConfig.type,
    startTime: timeConfig.startTime || undefined,
    endTime: timeConfig.endTime || undefined
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertyAreaInventorySalesPeriodConditionStatistics.value.value = resData?.qhzq
      housePropertyAreaInventorySalesPeriodConditionStatistics.value.yoyPercentage = resData?.qhzqTb
      housePropertyAreaInventorySalesPeriodConditionStatistics.value.qoqPercentage = resData?.qhzqHb
    }
  }).catch(error => {
    console.log(error);
  })
}

const areaInventorySalesPeriodConditionChangeFiltrateTime = (item) => { // 房地产各区库存及去化周期情况统计-顶部topinfo-顶部城市时间筛选
  publicChangeFiltrateTime(areaInventorySalesPeriodConditionTimeConfig.value, item);
  initInventorySalesPeriodTopInfoData(areaInventorySalesPeriodConditionTimeConfig.value.areaCode, areaInventorySalesPeriodConditionTimeConfig.value) // 房地产各区库存及去化周期情况统计-顶部top信息
  initImpactFactorImportanceRanking(currentInventorySalesPeriodImpactFactorImportanceRankingTab.value, areaInventorySalesPeriodConditionTimeConfig.value) // 总-影响因子
}

const initInventorySalesPeriodHousePropertyNewSalesPriceTrendData = (cityCode, requestType,  impactFactorType = '') => { // 房地产各区库存及去化周期情况统计-房地产销量价格走势
  if (!impactFactorType) return inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData = []

  let tempRequestType = 0
  tempRequestType = requestType == 4 ? 1 : 2
  getSupplyDemandGetREInventoryRight({
    adcode: cityCode,
    requestType: tempRequestType,
    dateType: inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisTimeType === 'month' ? 1 : 2,
    impactFactorType
  }).then(res => {
    const resData = res?.data
    inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData = []
    if (resData?.dateList?.length) {
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData = resData?.dateList;
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData.unshift(Number(inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData[0]) - 1)
    }
    if (resData?.zxList?.length && resData?.yxyzList?.length) {
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.seriesData = []
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.seriesData = [
        [0, ...resData?.zxList],
        [0, ...resData?.yxyzList]
      ]
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.legendData = [
        {
          name: tempRequestType === 1 ? '去化周期' : '库存',
          icon: 'rect',
          itemStyle: {
            color: '#F8F364'
          }
        },
        {
          name: inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.yAxisRightLabel,
          icon: 'rect',
          itemStyle: {
            color: '#0E81FF'
          },
        }
      ]
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisData?.length) inventorySalesPeriodHousePropertyNewSalesPriceTrend.value.updateChart();
    if (magnifyData.value.dialogVisible && magnifyData.value.moduleName === 'inventorySalesPeriodHousePropertyNewSalesPriceTrend') {
      dialogRef.value.updateChart();
    }
  })
}

const initInventorySalesPeriodScatterData = (cityCode) => { // 房地产各区库存及去化周期情况统计-scatter
  getSupplyDemandAnalyzeMacroeconomic({
    adcode: cityCode,
    requestType: currentInventorySalesPeriodScatterType.value === 'area' ? 1: 2
  }).then(res => {
    const resData = res?.data
    inventorySalesPeriodScatterData.value.series = []
    if (resData?.nameList?.length) {
      inventorySalesPeriodScatterData.value.areaNameList = resData?.nameList
    }
    if (resData?.dateList?.length) {
      inventorySalesPeriodScatterData.value.timelineList = resData?.dateList
    }
    if (resData?.result?.length) {
      inventorySalesPeriodScatterData.value.series = resData?.result
    }
  }).catch(error => {
    console.log(error);
  }).finally(_ => {
    if (inventorySalesPeriodScatterData.value.series?.length) inventorySalesPeriodScatter.value.updateChart();
  })
}

const publicInterval = (item) => { // 公共影响因子interval
  if (item.interval) {
    clearInterval(item.interval)
    item.interval = null
    item.currentBarIndex = 0
  }
  item.interval = setInterval(() => {
    if (item.currentBarIndex === 4) {
      item.currentBarIndex = 0
    } else {
      if (item.currentBarIndex < 5) {
        item.currentBarIndex++
      }
    }
  }, 10 * 1000)
}

const changeSalesTrendHousePropertyNewSalesPriceTrendSelect = (item) => { // 房地产销售趋势分析-房地产新增销量价格走势-select切换
  const tempObj = salesTrendHousePropertyNewSalesPriceTrendSelectList.value.find(x => x.id === item)
  const tempLegendName = tempObj?.value
  const tempYAxisName = tempObj?.unit
  housePropertyNewSalesPriceTrendData.value.yAxisLeftLabel = tempYAxisName
  housePropertyNewSalesPriceTrendData.value.legendData[0].name = tempLegendName
  initHousePropertyNewSalesPriceTrendData(housePropertySalesTrendAnalysisTimeConfig.value.areaCode, housePropertyNewSalesPriceTrendData.value.yAxisRightLabel)
}

const changeHousePropertySalesTrendAnalysisTab = (item) => { // 房地产销售趋势分析-切换当前房地产销售趋势分析tab
  initSalesTrendNewSalesStatisticsData(housePropertySalesTrendNewSalesStatisticsTimeConfig.value.areaCode, housePropertySalesTrendNewSalesStatisticsTimeConfig.value) // 新增销售情况统计
  initSalesTrendHouseConditionStatisticsData(cityObj.value.code) // 房屋情况统计
  initSalesTrendPriceDistributionData(cityObj.value.code) // 价格分布
  initSalesTrendArealDistributionData(cityObj.value.code) // 面积分布
}

const mapNameChange = (data) => { // 地图点击触发
  cityObj.value.name = cityObj.value.name == data.cityName ? '' : data.cityName;
  cityObj.value.code = cityObj.value.code == data.cityCode ? '' : data.cityCode;
  initPage(data.cityCode);
}

const changeHousePropertySalesConditionTab = (item) => { // 房地产销售走势tab变动
  currentHousePropertySalesConditionTab.value = housePropertySalesConditionTabList.value.find(x => x.label === item)?.id
  initHousePropertySalesConditionChartData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
}

const changeHousePropertySupplyDemandConditionTab = (item) => { // 房地产供需走势tab变动
  currentHousePropertySupplyDemandConditionTab.value = housePropertySupplyDemandConditionTabList.value.find(x => x.label === item)?.id
  initHousePropertySupplyDemandConditionChartData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需走势
}

const changeDistributionSelect = (event, type) => { // 房地产新增供需分布select
  if (newSupplyDemandDistributionData.value.startTime) {
    initNewSupplyDemandDistributionData()
  }
}

const changeInventorySalesPeriodScatterType = (value) => { // 房地产各区库存及去化周期情况统计-scatter图-tab切换
  if (currentInventorySalesPeriodScatterType.value === value) return;
  currentInventorySalesPeriodScatterType.value = value
  initInventorySalesPeriodScatterData(cityObj.value.code)
}

const housePropertySalesTrendAnalysisChangeFiltrateTime = (item) => { // 房地产销售趋势分析-顶部城市时间筛选
  publicChangeFiltrateTime(housePropertySalesTrendAnalysisTimeConfig.value, item);
  initHousePropertySalesTrendAnalysisTopInfoData(housePropertySalesTrendAnalysisTimeConfig.value) // 房地产销售趋势分析-顶部top信息
  initImpactFactorImportanceRanking(1, housePropertySalesTrendAnalysisTimeConfig.value) // 总-影响因子
}

const housePropertySalesTrendNewSalesStatisticsChangeFiltrateTime = (time) => { // 房地产销售趋势分析-新增销售情况统计-时间筛选
  publicChangeFiltrateTime(housePropertySalesTrendNewSalesStatisticsTimeConfig.value, time);
  initSalesTrendNewSalesStatisticsData(housePropertySalesTrendNewSalesStatisticsTimeConfig.value.areaCode, housePropertySalesTrendNewSalesStatisticsTimeConfig.value)
}

const changeHousePropertySalesConditionTime = (item) => { // 房地产销售情况-时间筛选
  publicChangeFiltrateTime(housePropertySalesConditionTimeConfig.value, item);
  initHousePropertySalesConditionData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售情况
  // initImpactFactorImportanceRanking(3, housePropertySalesConditionTimeConfig.value) // 总-影响因子
  initHousePropertySalesConditionChartData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
}

const changeHousePropertySupplyDemandConditionTime = (item) => { // 房地产供需情况-时间筛选
  publicChangeFiltrateTime(housePropertySupplyDemandConditionTimeConfig.value, item);
  initHousePropertySupplyDemandConditionData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需情况
  // initImpactFactorImportanceRanking(2, housePropertySupplyDemandConditionTimeConfig.value) // 总-影响因子
  initHousePropertySupplyDemandConditionChartData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需走势
}

const changeHousePropertySalesConditionHouseType = (item) => { // 房地产销售走势-户型value
  currentHousePropertySalesConditionHouseType.value = item
  initHousePropertySalesConditionChartData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
}

const changeHousePropertySalesConditionAcreage = (item) => { // 房地产销售走势-面积value
  currentHousePropertySalesConditionAcreage.value = item
  initHousePropertySalesConditionChartData(housePropertySalesConditionTimeConfig.value.areaCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
}

const changeHousePropertySupplyDemandConditionHouseType = (item) => { // 房地产供需走势-户型value
  currentHousePropertySupplyDemandConditionHouseType.value = item
  initHousePropertySupplyDemandConditionChartData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需走势
}

const changeHousePropertySupplyDemandConditionAcreage = (item) => { // 房地产供需走势-面积value
  currentHousePropertySupplyDemandConditionAcreage.value = item
  initHousePropertySupplyDemandConditionChartData(housePropertySupplyDemandConditionTimeConfig.value.areaCode, housePropertySupplyDemandConditionTimeConfig.value) // 房地产供需走势
}

const initHousePropertySupplyDemandContradictionAnalysisData = (timeConfig) => { // 房地产供需矛盾分析-顶部top信息
  getSupplyDemandAnalyzeHouseSupply({
    adcode: timeConfig.areaCode,
    requestType: timeConfig.type,
    startTime: timeConfig.startTime || undefined,
    endTime: timeConfig.endTime || undefined
  }).then(res => {
    const resData = res?.data
    if (resData) {
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].value = resData?.yxzgyts
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].yoyPercentage = resData?.yxzgytsTb
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[0].qoqPercentage = resData?.yxzgytsHb
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].value = resData?.yxzxsts
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].yoyPercentage = resData?.yxzxstsTb
      housePropertySupplyDemandContradictionAnalysisTopinfo.value[1].qoqPercentage = resData?.yxzxstsHb
    }
  }).catch(error => {
    console.log(error);
  })
}

const supplyDemandContradictionAnalysisChangeFiltrateTime = (item) => { // 房地产供需矛盾分析-顶部城市时间筛选
  publicChangeFiltrateTime(housePropertySupplyDemandContradictionAnalysisTimeConfig.value, item);
  initHousePropertySupplyDemandContradictionAnalysisData(housePropertySupplyDemandContradictionAnalysisTimeConfig.value) // 房地产供需矛盾分析-顶部top信息
  initImpactFactorImportanceRanking(currentSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab.value, housePropertySupplyDemandContradictionAnalysisTimeConfig.value) // 总-影响因子
}

const newSupplyDemandDistributionChangeFiltrateTimeType = () => { // 房地产供需矛盾分析-房地产新增供需分布-改变时间类型
  newSupplyDemandDistributionData.value.startTime = ''
  newSupplyDemandDistributionData.value.endTime = ''
}

const newSupplyDemandDistributionChangeFiltrateTime = (item) => { // 房地产供需矛盾分析-房地产新增供需分布
  publicChangeFiltrateTime(newSupplyDemandDistributionData.value, item);
  initNewSupplyDemandDistributionData()
}

const changeSupplyDemandContradictionAnalysisImpactFactorImportanceRankingTab = (item) => { // 房地产供需矛盾分析-影响因子-切换tab
  initImpactFactorImportanceRanking(item, housePropertySupplyDemandContradictionAnalysisTimeConfig.value) // 总-影响因子
}

const changeInventorySalesPeriodImpactFactorImportanceRankingTab = (item) => { // 房地产各区库存及去化周期情况统计-影响因子-切换tab
  initImpactFactorImportanceRanking(item, areaInventorySalesPeriodConditionTimeConfig.value) // 总-影响因子
}

const publicChangeFiltrateTime = (data, {areaCode, time, type}) => { // 公共处理-模块顶部公共筛选数据
  data.areaCode = areaCode || data.areaCode
  switch(type) {
    case 'month':
      data.type = 1
      data.startTime = time
      data.endTime = ''
      break;
    case 'year':
      data.type = 2
      data.startTime = time
      data.endTime = ''
      break;
    default: // monthRange
      data.type = 3
      data.startTime = time[0]
      data.endTime = time[1]
      break;
  }
}

const getPulicTopInfoFiltrateAreaList = (cityCode) => { // 获取公共筛选区列表
  getSupplyDemandGetRegion({adcode: cityCode}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      cityAndAreaList.value = resData?.map(x => {
        return {
          name: x.regionName,
          code: x.regionCode
        }
      })
    }
  }).catch(error =>{
    console.log(error);
  })
}

const fullSc = (componentName, componentParams, moduleName) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  magnifyData.value.moduleName = moduleName;
  switch(componentName) {
    case 'barImpactFactorImportanceRanking': // 房地产销售趋势分析/房地产供需矛盾分析/房地产各区库存及去化周期情况统计-影响因子重要程度排行
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h147 dialog-h147',
        intervalData: { currentBarIndex: componentParams.currentBarIndex }
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'lineHousePropertyNewSalesPriceTrend': // 房地产销售趋势分析-房地产新增销量价格走势/房地产各区库存及去化周期情况统计-房地产销量价格走势
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h147 dialog-h147',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'barSalesTrendNewSalesStatistics': // 房地产销售趋势分析-新增销售情况统计
      magnifyData.value.props = {
        barData: componentParams,
        class: 'h150 dialog-h150',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'radarSalesTrendHouseConditionStatistics': // 房地产销售趋势分析-房屋情况统计
      magnifyData.value.props = {
        radarData: componentParams,
        class: 'h150 dialog-h150',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'boxplotSalesTrend': // 房地产销售趋势分析-价格/面积分布
      magnifyData.value.props = {
        boxplotData: componentParams,
        class: 'h118 dialog-h118',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'pie': // 房地产停缓建项目交付趋势-停缓建项目原因统计
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h135 dialog-h135',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'singleLine': // 房地产停缓建项目交付趋势-房地产停缓建项目走势
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h135 dialog-h135',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'lineHousePropertyConditionChart': // 房地产销售/供需情况-chart图
      magnifyData.value.props = {
        lineData: componentParams,
        class: 'h140 dialog-h140',
        tabList: moduleName === 'housePropertySalesCondition' ? [] : housePropertySupplyDemandConditionTabList.value,
        yAxisName: housePropertySalesConditionTabList.value.find(x => x.id == ((moduleName === 'housePropertySalesCondition') ? currentHousePropertySalesConditionTab.value : currentHousePropertySupplyDemandConditionTab.value))?.unit
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'lineBar': // 房地产供需走势-chart图
      magnifyData.value.props = {
        lineBarData: componentParams,
        class: 'h147 dialog-h147',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'scatterInventorySalesPeriod': // 房地产各区库存及去化周期情况统计-scatter-chart图
      magnifyData.value.props = {
        scatterData: componentParams,
        class: 'h147 dialog-h147',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
    case 'scatter': // 房地产供需矛盾分析-房地产新增供需分布-scatter图
      magnifyData.value.props = {
        scatterData: componentParams,
        class: 'h180 dialog-h180',
      };
      magnifyData.value.dialogWidth = '60%';
      break;
  }
};

const dialogEmit = ({type, value}) => { // dialog的v-on
  switch(type) {
    case 'housePropertyNewSalesPriceTrend': // dialog-房地产新增销量价格走势-chart图
      housePropertyNewSalesPriceTrendData.value.xAxisTimeType = value
      break;
    case 'housePropertyDeferredConstructionProjectTrend': // dialog-房地产停缓建项目走势-chart图
      housePropertyDeferredConstructionProjectTrendData.value.xAxisTimeType = value
      break;
    case 'housePropertySalesCondition': // dialog-房地产销售情况-chart图
      housePropertySalesConditionData.value.xAxisTimeType = value
      break;
    case 'housePropertySupplyDemandCondition': // dialog-房地产供需情况-chart图
      housePropertySupplyDemandConditionData.value.xAxisTimeType = value
      break;
    case 'housePropertySupplyDemandTrend': // dialog-房地产新增供需走势-chart图
      housePropertySupplyDemandTrendData.value.xAxisTimeType = value
      break;
    case 'inventorySalesPeriodHousePropertyNewSalesPriceTrend': // dialog-房地产各区库存及去化周期情况统计-房地产销量价格走势-chart图
      inventorySalesPeriodHousePropertyNewSalesPriceTrendData.value.xAxisTimeType = value
      break;
  }
}

const goOtherPage = (item) => { // 顶部导航
  switch(item) {
    case '统计':
      router.push('/housePropertyAnalysis/statistics')
      break;
    case '模拟测算':
      router.push('/housePropertyAnalysis/forecast')
      break;
    default:
      break;
  }
}

const changeDeferredConstructionProjectReasonsStatisticsAreaSelect = () => { // 房地产停缓建项目交付趋势-区域切换筛选
  initDeferredConstructionProjectReasonsStatisticsData() // 房地产停缓建项目交付趋势-topinfo & 饼图
  initHousePropertyDeferredConstructionProjectTrendData() // 房地产停缓建项目交付趋势-房地产停缓建项目走势
}

const initPage = (cityCode) => {
  initSalesTrendNewSalesStatisticsData(cityCode, housePropertySalesTrendNewSalesStatisticsTimeConfig.value) // 房地产销售趋势分析-新增销售情况统计
  initSalesTrendHouseConditionStatisticsData(cityCode) // 房地产销售趋势分析-房屋情况统计
  initSalesTrendPriceDistributionData(cityCode) // 房地产销售趋势分析-价格分布
  initSalesTrendArealDistributionData(cityCode) // 房地产销售趋势分析-面积分布
  initDeferredConstructionProjectReasonsStatisticsData() // 房地产停缓建项目交付趋势-topinfo & 饼图
  initHousePropertyDeferredConstructionProjectTrendData() // 房地产停缓建项目交付趋势-房地产停缓建项目走势
  initHousePropertySalesConditionData(cityCode, housePropertySalesConditionTimeConfig.value, true) // 房地产销售情况
  initHousePropertySalesConditionChartData(cityCode, housePropertySalesConditionTimeConfig.value) // 房地产销售走势
  initHousePropertySupplyDemandConditionData(cityCode, housePropertySalesConditionTimeConfig.value, true) // 房地产供需情况
  initHousePropertySupplyDemandConditionChartData(cityCode, housePropertySalesConditionTimeConfig.value) // 房地产供需走势
  initNewSupplyDemandDistributionData(cityCode) // 房地产供需矛盾分析-新增供需分布
  initInventorySalesPeriodTopInfoData(cityCode, housePropertySalesConditionTimeConfig.value) // 房地产各区库存及去化周期情况统计-顶部topinfo
  initInventorySalesPeriodScatterData(cityCode) // 房地产各区库存及去化周期情况统计-scatter
  initImpactFactorImportanceRanking('', { areaCode: cityCode, type: 2, startTime: currentYear.value - 1 }) // 总-影响因子
  getPulicTopInfoFiltrateAreaList(cityCode)
}

onMounted(() => {
  const date = new Date();
  currentYear.value = date.getFullYear();
  currentYearMonthDay.value = `${currentYear.value}年${date.getMonth() + 1}月${date.getDate()}日`;
  const currentYearMonth = `${currentYear.value}-${date.getMonth() + 1 > 9 ? '' : 0}${date.getMonth() + 1}`

  const lastYear = currentYear.value - 1
  salesTrendHouseConditionStatisticsMonthPicker.value = currentYearMonth
  salesTrendPriceDistributionMonthPicker.value = currentYearMonth
  salesTrendArealDistributionMonthPicker.value = currentYearMonth
  housePropertySalesConditionTimeConfig.value.startTime = lastYear
  housePropertySupplyDemandConditionTimeConfig.value.startTime = lastYear
  housePropertySupplyDemandContradictionAnalysisTimeConfig.value.startTime = lastYear
  housePropertySalesTrendNewSalesStatisticsTimeConfig.value.startTime = lastYear
  areaInventorySalesPeriodConditionTimeConfig.value.startTime = lastYear
  newSupplyDemandDistributionData.value.startTime = lastYear
  initPage(cityObj.value.code);
})
</script>

<style scoped lang="less">
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/housePropertyAnalysis/statistics/header-bg@2x.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    > span {
      font-size: 30px;
      margin-bottom: 20px;
      text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.6);
    }

    .top-tab {
      display: flex;

      .top-tab-left {
        position: absolute;
        top: 33px;
        left: 200px;
        display: flex;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        &-item:first-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/top-tab-bg@2x.png");
          background-size: 100% 100%;
        }

        &-item:last-child {
          background: url("@/assets/img/housePropertyAnalysis/statistics/chosen-top-tab-bg@2x.png");
          background-size: 100% 100%;
          margin-left: -25px;
        }
      }

      .top-tab-right {
        position: absolute;
        top: 33px;
        right: 375px;
        display: flex;
        align-items: center;

        &-item {
          font-size: 20px;
          font-weight: bolder;
          padding: 7px 78px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("@/assets/img/housePropertyAnalysis/statistics/flip-horizontal-top-tab-bg@2x.png");
          background-size: 100% 100%;
          cursor: pointer;
        }

        span {
          position: absolute;
          font-size: 15px;
          right: -150px;
        }
      }
    }
  }

  .main-content {
    width: 100vw;
    padding: 0 50px;
    box-sizing: border-box;
    height: calc(100vh - 111px);

    .main-content-gird-title {
      width: 100%;
      display: flex;
      align-items: center;

      &-logo {
        width: 20px;
        height: 20px;
        margin-right: 6px;
      }

      p {
        font-size: 18px;
      }
    }

    .module-title-content-middle-line {
      width: 100% px;
      border: 1px solid;
      margin-top: 6px;
      border-image: linear-gradient(297deg, rgba(97, 228, 255, 0), rgba(50, 197, 255, 1), rgba(102, 255, 255, 1), rgba(50, 197, 255, 1), rgba(50, 197, 255, 0)) 1 1;
    }

    .public-topinfo {
      width: 100%;
      background-color: #054f66;
      display: flex;
      justify-content: space-between;
      padding: 5px 10px;
      box-sizing: border-box;
      font-size: 12px;
      margin-top: 10px;
      flex-direction: column;

      .public-topinfo-text {
        display: flex;
        justify-content: space-evenly;
      }

      &-item {
        display: flex;
        align-items: flex-end;

        span:first-child {
          color: #00f9fd;
        }
      }
    }

    .house-property-sales-trend-analysis {
      background: url("@/assets/img/housePropertyAnalysis/analysis/module-bg-left-top-648-661.png");
      background-size: 100% 100%;
      padding: 16px 11px 0;
      height: 676px;
      box-sizing: border-box;

      .sales-trend-impact-factor-importance-ranking {
        height: 166px;
      }

      .sales-trend-house-property-new-sales-price-trend {
        position: relative;
        height: 166px;

        .sales-trend-house-property-new-sales-price-trend-select {
          width: 100px;
          position: absolute;
          right: 50px;
          top: 0;

          :deep(.el-select__wrapper) {
            background: #001A35;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            border: 1px solid #0839A7;

            .el-select__selected-item {
              color: white;
            }
          }
        }
      }

      .house-property-sales-trend-analysis-tabs {
        position: relative;

        :deep(.el-tabs) {
          height: 46px;
          display: flex;
          align-items: center;

          .el-tabs__header {
            margin: 0;
          }

          .el-tabs__nav-wrap:after {
            height: 0;
          }

          .el-tabs__active-bar {
            height: 0;
          }

          .el-tabs__item {
            text-align: center;
            padding: 0 20px;
            font-size: 12px;
            height: 30px;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            color: white;
          }

          .el-tabs__item:not(:last-child) {
            margin-right: 5px;
          }

          .el-tabs__item.is-active {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }

      .sales-trend-new-sales-statistics, .sales-trend-house-condition-statistics {
        height: 169px;
      }
    }

    .house-property-deferred-construction-project-delivery-trends {
      position: relative;
      margin-top: 20px;
      background: url("@/assets/img/housePropertyAnalysis/analysis/module-bg-left-bottom-648-270.png");
      background-size: 100% 100%;
      padding: 16px 11px 25px 16px;
      height: 263px;
      box-sizing: border-box;
      &-select {
        position: absolute;
        right: 11px;
        top: 16px;
        margin-left: 20px;
        width: 80px;
      }
    }

    .pubilc-chart-title {
      margin-top: 8px;
      font-size: 14px;
      font-weight: bold;
    }

    /deep/ .month-picker {
      position: absolute;
      top: 0;
      right: 0;
      width: 100px;
      height: 20px;
      .el-input__wrapper {
        background: #204485;
        .el-input__inner {
          color: white;
        }
      }
    }

    .middle-map {
      height: 400px;

      .map-address {
        position: absolute;
        top: 0px;
        left: 0px;
        letter-spacing: 1px;
        text-shadow: 0px 1px 2px #c1731c;
        font-size: 18px;
        color: #60f9f4;
        letter-spacing: 1.2px;
        margin-left: 27px;
      }

      .map-address::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -27px;
        width: 20px;
        height: 20px;
        background: url("@/assets/img/personInfor/map-address.png");
        background-size: 100% 100%;
      }
    }

    .house-property-condition {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 558px;
      box-sizing: border-box;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-square.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 21px;
      > div {
        height: 50%;
      }
    }

    .house-property-supply-demand-contradiction-analysis {
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg-648-575.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 16px 10px 2px 16px;
      box-sizing: border-box;
      height: 500px;
      .supply-demand-contradiction-analysis-impact-factor-importance-ranking {
        position: relative;
        height: 166px;
      }
      .supply-demand-contradiction-analysis-new-supply-demand-distribution {
        position: relative;
        height: 166px;
        .new-supply-demand-distribution-select {
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          align-items: center;
          .new-supply-demand-distribution-select-item {
            z-index: 1;
            width: 90px;
            margin-right: 10px;
          }
        }
      }
    }
    .house-property-area-inventory-sales-period-condition-statistics {
      position: relative;
      padding: 16px 11px 0;
      margin-top: 20px;
      box-sizing: border-box;
      height: 438px;
      .inventory-sales-period-impact-factor-importance-ranking, .inventory-sales-period-house-property-new-sales-price-trend {
        position: relative;
        z-index: 1;
        height: 166px;
      }
      .inventory-sales-period-scatter {
        position: relative;
        .inventory-sales-period-scatter-btns {
          position: absolute;
          top: 10px;
          right: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 2;

          .inventory-sales-period-scatter-btn {
            padding: 5px 10px;
            background: #000022;
            box-shadow: inset 0px 0px 8px 0px #3D7FFF;
            border-radius: 8px;
            cursor: pointer;
            font-size: 12px;
          }

          .inventory-sales-period-scatter-btn:first-child {
            margin-right: 10px;
          }

          .active-inventory-sales-period-scatter-btn {
            background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
          }
        }
      }
    }
    .house-property-area-inventory-sales-period-condition-statistics:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      background: url("@/assets/img/housePropertyAnalysis/statistics/module-bg@2x.png");
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      transform: rotateZ(180deg);
      z-index: 0;
    }
  }
}
.check-time-year-or-month {
  position: absolute;
  right: 0;
  bottom: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .el-button {
    width: 20px;
    height: 20px;
    margin: 0;
    font-size: 10px;
    box-shadow: inset 0 0 0.04167rem 0 #3D7FFF;
    border-radius: 0.04167rem;
    cursor: pointer;
    color: white;
    background-color: transparent;
    border: 0;
  }
  .el-button:last-child {
    margin-top: 5px;
  }
  .el-button.active-btn {
    background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
  }
}
.impact-factor-importance-ranking-btns {
  position: absolute;
  right: 0;
  top: 0;
  :deep(.el-tabs) {
    display: flex;
    align-items: center;

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav-wrap:after {
      height: 0;
    }

    .el-tabs__active-bar {
      height: 0;
    }

    .el-tabs__item {
      text-align: center;
      padding: 0 10px;
      font-size: 12px;
      height: 20px;
      box-shadow: inset 0px 0px 8px 0px #3D7FFF;
      border-radius: 8px;
      cursor: pointer;
      color: white;
    }

    .el-tabs__item:not(:last-child) {
      margin-right: 5px;
    }

    .el-tabs__item.is-active {
      background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
    }
  }
}
:deep(.el-date-editor) {
  opacity: 1;
}
/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}

/deep/ .el-select__wrapper {
  background: #204485;
  .el-select__selected-item {
    color: white;
  }
}
.custom-select-option{
  color:#ffffff;
  background: #1C5BCC;
}
.custom-select-option.is-selected{
  color: #00e0ff;
}
.custom-select-option:hover{
  background:#368CF2;
}
</style>